CSS的动画效果

动画效果

语法： 创建动画：@keyframes 调用动画：animation

animation参数值

参数值	效果
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function	规定动画的速度曲线。默认是 "ease"
animation-delay	规定动画何时开始。默认是 0
animation-iteration-count	规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'
animation-play-state	规定动画是否正在运行或暂停。默认是 "running",'paused'
animation-fill-mode	规定对象动画时间之外的状态.forwards,backwards默认值

1、通过 @keyframes(关键帧动画) 规则，您能够创建动画。

2、创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，能够多次改变这套 CSS 样式。

3、以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间。

4、为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

5、在CSS样式中，用animation属性来应用 @keyframes所定义的动画

案例

 案例一：元素平移加颜色渐变

hello world

 

 案例二：将元素移动到某个位置，并且停在当前位置

hello world

案例三：元素沿着正方形轨迹移动

hello world

案例四：西游记效果

steps 有两个参数 第一个表示分几步执行完 第二个有两个值 start 第一帧是第一步动画结束 end 第一帧是第一步动画开始

 案例五：风车效果