css动画学习总结

css 动画（animation），简单，炫酷。

动画，就是让静止的物体动起来。那么就会有起始位置，结束位置（可能还有过程位置），动的过程（效果），动完执行什么操做，如何隐藏这个时间点不须要的元素，元素重用等问题的出现。

 

如何用最基本的方式定义一个动画？而且如何用一个动画？

过程：

1.首先定义起始、（过程）、结束位置，关键字@keyframes+name

@keyframes drive {

0% { transform: translateX(0); } //动画初始位置

100% { transform: translateX(400px); } //动画结束位置右移400px

}

2.用动画

.car {

animation-name: drive;

animation-duration:1s;

}

用动画的时候，就须要动画animation的各类属性名字了。

经常使用的有 animation-name  ：用哪一个动画

            animation-duration：动画持续时间

            。。。

好了，如此简单的，一个动画就作好了。能够在.car{}中添加小车的样式，这样就会出现一个会动的小车。

 

so，来讲说稍微高级的东西吧。

animation-timing-function：动画效果

animation-iteration-count：动画会重播次数。

说说animation-timing-function：（让动画看起来更舒服）主要属性：ease（默认）、linear、ease-out、ease-in、ease-in-out。

linear：

ease-in：

ease-out（ease-in反过来）：

 

贝塞尔曲线

animation-delay：延时

animation-fill-mode ：动画结束时候的位置

属性值有：none，forward，backforward，both

animation-direction： 动画的方向

normal（直接播放帧，从0-100%）

reverse：（100%-0）

alternate：（0-100%，100%-0，。。。）

alternate-reverse：（100%-0,0-100%，。。。）

 

简写animation属性

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

 

steps：让雪碧图动起来（各个时期动画图片组合的雪碧图）

 

animation-play-state 启动（中止）动画，与hover连着用

.sticker { animation: spin 10s linear infinite; animation-play-state: paused; }

.sticker:hover { animation-play-state: running; }

 

css3 比 js快，但兼容性还不行。