CSS3动画

Css3动画制作分为两步:创建动画、绑定动画。

@keyframes规则

@keyframes规则用于创建动画。

在@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。

可以改变任意多的样式任意多的次数。

需要使用百分比来规定变化发生的时间，或用关键词”from”和”to”,等同于0%和100%。

0%是动画的开始，100% 是动画的完成。

@keyframes书写方法

@keyframes 动画名称{

动画过程，可以添加任意百分比处的动画细节

}

@keyframes move {

                /* 从头开始，最好保持跟默认样式的状态一致 */
                from {
                  transform: translateY(0);
                }
                /* 到结束位置 */
                to {
                  transform: translateY(100px);
                }

animation属性

需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果。

animation属性用于对动画进行捆绑。

语法:

animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间;

其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表

浏览器兼容

Internet Explorer 10、Firefox 以及Opera支持@keyframes规则和animation属性。

Chrome和Safari需要前缀-webkit-。

Internet Explorer 9，以及更早的版本，不支持@keyframe规则或animation属性。