css动画

css动画

使用css实现动画有两种方式，animation和transition。

一.transition（过渡）

它有四个属性：

transition-property规定设置过渡效果的 CSS 属性的名称
 transition-duration规定完成过渡效果需要多少秒或毫秒
 transition-timing-function规定速度效果的速度曲线
 transition-delay定义过渡效果何时开始

初学css时，比较容易混淆transform（变形）、transition（过渡）、translate（移动）。transform(变形)是CSS3中的元素的属性，而translate只是transform的一个属性值；transform可以设置为transition（过渡动画）的transition-property的一个属性值。

 

二.animation

animation属性结合@ keyframes使用， animation中的animation-name需要设置成@ keyframes的name一致。

animation-name规定需要绑定到选择器的 keyframe 名称
 animation-duration规定完成动画所花费的时间，以秒或毫秒计
 animation-timing-function规定动画的速度曲线
 animation-delay规定在动画开始之前的延迟
 animation-iteration-count规定动画应该播放的次数
 animation-direction规定是否应该轮流反向播放动画
 animation-play-state规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
 animation-fill-mode指定动画是否正在运行或已暂停

 

 

 

 

 

 

 

来源：https://www.cnblogs.com/huronghua/p/12017507.html