transition与animation

transition

transition 属性是一个简写属性，用于设置四个过渡属性
transition-property, 设置过渡效果过属性名
transition-duration, 规定完成过度的时间
transition-timing-function,规定过渡效果的速度曲线
transition-delay 定义过渡效果过什么时候开始

 

transition 的初始值为：

transition-delay: 0s;
transition-duration: 0s;
transition-property: all;
transition-timing-function: ease;

animation定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name，规定需要绑定到选择器的 keyframe 名称。。
• animation-duration，规定完成动画所花费的时间，以秒或毫秒计。
• animation-timing-function，规定动画的速度曲线。
• animation-delay，规定在动画开始之前的延迟。
• animation-iteration-count，规定动画应该播放的次数。
• animation-direction，规定是否轮流反向播放、
• 默认值：none 0 ease 0 1 normal，
• 在javascript中的用法object.style.animation="mymove 5s infinite"

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

 

语法

animation: name duration timing-function delay iteration-count direction;

规定是否应该轮流反向播放动画。

animation-timing-function 使用名为三次贝塞尔（Cubic Bezier）函数的数学函数，来生成速度曲线。您能够在该函数中使用自己的值，也可以预定义的值：

值	描述
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-iteration-count 属性定义动画的播放次数。

值	描述
n	定义动画播放次数的数值。
infinite	规定动画应该无限次播放。

 

animation-direction 属性定义是否应该轮流反向播放动画。

如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。

注释：如果把动画设置为只播放一次，则该属性没有效果。

 

值	描述
normal	默认值。动画应该正常播放。
alternate	动画应该轮流反向播放。

规定是否应该轮流反向播放动画。