CSS3 高级教程之动画定义和使用

目录

前言

一、keyframes定义动画

二、元素使用动画

1.关键代码

2.使用举例

三、CSS3动画常见属性

 四、速度曲线

总结

---

前言 

CSS3可以实现HTML元素的动画效果，不使用JavaScript或者是Flash也能实现动画效果，在CSS3中新增了一个transition模块，通过一些简单的CSS 事件来触发元素的外观变化，使得显示的效果更加细腻。

---

一、keyframes定义动画

        使用@keyframes规则，可以创建动画，指定变化时用0%到100%，或关键词“from”和“to”，0%是动画的开头，100%是动画的结尾。我们把名称定义为move，关键代码如下：

@keyframes move {
            0% {
                transform: translateX(0px);
            }
            100% {
                transform: translateX(1000px);   //沿着X轴移动1000像素。
            }
        }

二、元素使用动画

1.关键代码

        调用动画：
                        animation-name: move;
        持续时间：
                        animation-duration: 2s;

2.使用举例

我们来看看这个动画是怎么完成的，首先直接建立一个盒子div，然后为其设置样式，其中有些属性什么意思不懂可以看下面第三节：CSS3动画常见属性