CSS3-动画

CSS3动画使得动态元素的创建变得更加容易。 它提供了一个简单明了的方式来描述如何为某一个元素在页面上定义动画效果。通过CSS3动画，我们可以让元素在某一个时间段内发生平移、旋转、缩放、渐变等变化效果。同时，它还具有以下特点：

• 不需要JavaScript，通过CSS实现动画效果
• 常见的CSS属性都可以在CSS3动画中使用
• 多个动画可以同时进行

使用 CSS3 动画的方法

使用 CSS3 动画的最常见方法是定义一个@keyframes块，并将其指定为一个名称，该名称由animation属性使用。@keyframes规则中定义了一个动画序列，指定一个或多个关键帧，每个关键帧在动画序列的某个时间点上定义了一个状态。例如，以下代码表示从左边的起点向右移动一个元素，到右边的终点：

@keyframes move-right {
    0% {left: 0px;}
    100% {left: 400px;}
}

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
    animation: move-right 2s;
}

在上述例子中，@keyframes定义了两个状态0%和100%，代表了开始和结束时元素的样式，对于每个时间间隔CSS3动画引擎会自动计算状态中间的过渡效果，产生一个比较流畅的动画效果。

动画属性

在 CSS3 动画中，我们可以使用以下属性：

animation-name

定义一个@keyframes动画名称

animation-name: [none|keyframes-name];

animation-duration

定义动画需要多长时间完成

animation-duration: [time|initial|inherit];

animation-timing-function

用于定义动画的速度曲线

animation-timing-function: [linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)|initial|inherit];

animation-delay

定义起始时间延迟

animation-delay: [time|initial|inherit];

animation-iteration-count

定义动画执行次数

animation-iteration-count: [number|infinite|initial|inherit];

animation-direction

定义动画的播放方向

animation-direction: [normal|reverse|alternate|alternate-reverse|initial|inherit];

animation-fill-mode

定义动画完成后的状态

animation-fill-mode: [none|forwards|backwards|both|initial|inherit]

animation-play-state

定义动画是否正在运行或停止

animation-play-state: [paused|running|initial|inherit];

示例

在下面的示例中，使用动画属性创建了一个旋转的方块：

.box {
    position: relative;
    width: 100px;
    height: 100px;
    background: red;
    animation: spin 4s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

上述代码中，变量在动画的整个周期内都是线性的。利用多个关键帧的过渡我们可以构建出更加丰富的动态效果。

总结

CSS3动画提供了一种简单的方式来为页面元素定义动态效果，利用它可以为网页增添不少绚丽的视觉效果。希望本文可以为CSS3动画的学习提供一些帮助。