css3 动画 @keyframes 用法
css3 动画 @keyframes 用法
1、动画必须定义动画的名称和时长.
2、用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，0%（from） 是动画的开始，100%（to） 是动画的完成。
3、为了得到最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。
4、给div写样式时必须相对定位 position：relative；否则动画不会动
- @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。请把它捆绑到某个选择器，用法如下：
@keyframes animationname {keyframes-selector {css-styles;}}
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-
animation 属性是一个简写属性，用于设置六个动画属性：
animation: name duration timing-function delay iteration-count direction;
具体属性内容
.•animation-name //动画名称，自拟
-
• animation-duration //动画时长，【必须规定】 eg：10s
-
•animation-timing-function //规定动画的速度曲线
属性值：liner- 【从头到尾匀速】ease- 【默认，低速开始，加快，结束前变慢】ease-in- 【低速开始】ease-out- 【低速结束】ease-in-out- 【开始和结尾低速】
-
• animation-delay // 动画开始前的延迟时间
-
• animation-iteration-count // 动画播放次数，
值：n次数 /infinite无限次播放
-
• animation-direction //是否轮流反向播放动画
normal【默认值，正常播放】alternate【轮流反向播放】则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放
简单示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画的实现</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
position: relative; /* 没有这句话不会动 */
/*
animation-name:move;
animation-duration: 5s;
animation-timing-function:liner;匀速/ease默认
animation-delay:3s;
animation-iteration-count:infinite循环
animation-direction:alternate轮流反向
*/
animation: move 5s infinite;
-webkit-animation: move 5s infinite;
}
@keyframes move{
from {left:0px;}
to{left:100%}
}
@-webkit-keyframes move{
from {left:0px;}
to{left:100%}
}
</style>
</head>
<body>
<div></div>
</body>
</html>