CSS 动画

CSS transition 属性

transition 属性设置元素当过渡效果，四个简写属性为：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

注意： 始终指定transition-duration属性，否则持续时间为0，transition不会有任何效果。

默认值：	all 0 ease 0
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transition="width 2s"

transition: property duration timing-function delay;

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

 

CSS animation 属性

https://github.com/animate-css/animate.css

默认值:	none 0 ease 0 1 normal
继承:	no
版本:	CSS3
JavaScript 语法:	object.style.animation="mymove 5s infinite"

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

值	说明
animation-name	指定要绑定到选择器的关键帧的名称
animation-duration	动画指定需要多少秒或毫秒完成
animation-timing-function	设置动画将如何完成一个周期
animation-delay	设置动画在启动前的延迟间隔。
animation-iteration-count	定义动画的播放次数。
animation-direction	指定是否应该轮流反向播放动画。
animation-fill-mode	规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
animation-play-state	指定动画是否正在运行或已暂停。
initial	设置属性为其默认值。 阅读关于 initial的介绍。
inherit	从父元素继承属性。 阅读关于 initinherital的介绍。

 

CSS3 transform 属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

transform: none|transform-functions;

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.transform="rotate(7deg)"