animation的属性值
animation的属性值
@keyframes 规定动画
animation 属性是一个简写属性，用于设置六个动画属性（复合式写法，出了animation-play-state属性）：
1、animation-name 指定要绑定到选择器的关键帧的名称
2、animation-duration 动画指定需要多少秒或毫秒完成
3、animation-timing-function 设置动画将如何完成一个周期
4、animation-delay 设置动画在启动前的延迟间隔。
5、animation-iteration-count 定义动画的播放次数。
6、animation-direction 指定是否应该轮流反向播放动画。
7、animation-play-state 规定动画是否正在运行或暂停。默认为"running"
@keyframes
使用@keyframes规则 ，你可以创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
其中有默认的
@keyframes name{ from{初始状态属性} to{结束状态属性} }
规定from{}起始位置状态 和to{}最后位置状态。
同时也可以设置为
@keyframes name{ 0%{初始状态属性} 50%{中间再可以添加关键帧} 100%{结束状态属性} }
在其中进行特定动画不同时段的状态修改。
目前浏览器都不支持@keyframes规则。
firefox 支持@-moz-keyframes opera 支持 @-o-keyframes Sarari 和 Chrome 支持 @-webkit-keyframes
animation
animation和transition 都可以进行动画。但transition需要再特定的事件(hover和click等)中才能实现。animation的实现需要有animation-name animation-duration 这两个属性值才能运行。
.box{width: 50px;height: 50px;margin: 50px auto;background-color: red;
animation: name 2s;
}
@keyframes name{
from{transform: translateX(100px);}
to{transform: translateX(200px);}
}
可以使用复合式写法animation: name（animation-name） 2s（ animation-duration ）;也可以分开设置。
1、animation-name◦
检索或设置对象所应用的动画名称◦
必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove;
2、animation-duration◦
检索或设置对象动画的持续时间◦
说明：animation-duration:3s; 动画完成使用的时间为3s
3、animation-timing-function◦
检索或设置对象动画的过渡类型◦
属性值
▪linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
▪ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
▪ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
▪ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
▪ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0,0.58, 1.0)
▪step-start：马上跳到动画每一结束桢的状态
▪cubic-bezier(n,n,n,n)：0-1数值自己定义
4、animation-delay◦
检索或设置对象动画延迟的时间◦
说明：animation-delay:0.5s; 动画开始前延迟的时间为0.5s)
5、animation-iteration-count◦
检索或设置对象动画的循环次数◦（默认1次）
属性值
▪animation-iteration-count: infinite | number;
▪infinite：无限循环
▪number: 循环的次数
6、animation-direction◦
检索或设置对象动画在循环中是否反向运动◦
属性值
▪normal：正常方向
▪reverse：反方向运行
▪alternate：动画先正常运行再反方向运行，并持续交替运行
▪alternate-reverse：动画先反运行再正方向运行，并持续交替运行
▪inherit：从父级继承
7、animation-play-state◦
检索或设置对象动画的状态◦
属性值
▪animation-play-state:running | paused;
▪running:运动
▪paused: 暂停
▪animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
8、animation复合写法
animation: name duration timing-function delay iteration-count direction fill-mode play-state（所有属性集合）
animation 案例
案例1、形状的改变
<body>
<div class="box"></div>
</body>
<style type="text/css">
.box{width: 50px;height: 50px;margin: 50px auto;background-color: red;
animation: name 2s infinite ;}
@keyframes name{from{}to{border-radius: 50%;}}
</style>
要实现动画第一步，事先要实现元素的初始状态，再在@keyframes 中规定动画元素的最后状态。
案例2、旋转 配合transition
<body>
<div class="box"></div>
</body>
<style type="text/css">
.box{width: 150px;height: 150px;margin: 50px auto;background-color: red;
animation: name 1s infinite ;}
@keyframes name{from{}
to{transform: rotate(180deg);}}
</style>
有时在考虑旋转的时候，我们需要考虑旋转的中心点。
上一篇： animation的属性
下一篇： 3dmax切角长方体怎么建模?