css3动画（animation）

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果.

1.必要元素：

1. 通过@keyframes指定动画序列；自动补间动画，确定两个点，系统会自动计算中间过程。这两个点就称为关键帧。我们可以设置多个关键帧
2. 通过百分比将动画序列分割成多个节点；
3. 在各节点中分别定义各属性
4. 通过animation将动画应用于相应元素；

2.animation样式常用属性：

• 动画序列的名称:animation-name: move;
• 动画的持续时间:animation-duration: 1s;
• 动画的延时:animation-delay: 1s;
• 播放状态:animation-play-state: paused|running;
• 播放速度:animation-timing-function: linear;
• 播放次数 反复:animation-iteration-count: 1;
• 动画播放完结后的状态:animation-fill-mode: forwards;
• 循环播放时，交叉动画:animation-direction: alternate;

3.代码说明：

<style>
    *{
        padding: 0;
        margin: 0;
    }
    div{
        width: 300px;
        height: 300px;
        margin:100px auto;
    }
    div > img{
        width:100%;
    }
    /*添加动画*/
    @keyframes rotateAni {
        0%{
            /*可以同时对多个属性添加动画效果*/
            transform: rotate(0deg) scale(1);
        }
        50%{
            transform: rotate(180deg) scale(2);
        }
        100%{
            transform: rotate(360deg) scale(1);
        }
    }
    div:hover > img{
        /*动画名称-自定义*/
        animation-name: rotateAni;
        /*动画时间*/
        animation-duration: 1s;
        /*动画速率曲线： linear：匀速  ease：动画以低速开始，然后加快，在结束前变慢  ease-in：动画以低速开始  ease-out：动画以低速结束  ease-in-out：动画以低速开始和结束*/
        animation-timing-function: linear;
        /*动画播放次数*/
        animation-iteration-count: 4;
        /*动画时间延迟*/
        animation-delay: 0s;
        /*动画播放完的状态：  forwards:保持动画播放完毕后的状态 backwards:退回到原始状态(默认值)*/
        animation-fill-mode: forwards;
        /*动画是否轮流反射播放：  alternate:在规定的次数内轮流反射播放  normal:正常播放*/
        /*animation-direction: alternate;*/
    }
    div:active >img{
        /*动画的当前播放状态：  paused：暂停  running:运行*/
        animation-play-state: paused;
    }
</style>

4、点击查看案例：制作自动旋转的钟表

前端进阶精选：点此去