CSS3动画

动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用，制作动画分为两步：
1.先定义动画
2.再使用（调用）动画

1. @keyframes定义动画

使用@keyframes规则，你可以创建动画，keyframes就是关键帧的意思

@keyframes 动画名 {
    from|0%{
    	css样式
    }
    percent{
    	css样式
    }
    to|100%{
    	css样式
    }
}

percent：为百分比值，表示动画进度，可以添加多个百比，可以理解为每一个百分比样式对应一个关键帧。这些关键帧就是动画序列
动画序列

• 0% 是动画的开始，100% 是动画的结束
• 请用百分比或关键字来规定变化发生的时间，关键词 "from" 和 "to"，等同于 0% 和 100%。

2. 执行动画

执行动画必须指定动画名和持续时

/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;

        @keyframes move {
            /* 开始状态 */
            0% {
                transform: translateX(0px);
            }
            /* 结束状态 */
            100% {
                transform: translateX(1000px);
            }
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(62, 132, 175);
            /* 2. 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

动画常用属性

复合属性animation

一般更常用复合属性animation

/* animation：动画名称 持续时间 运动曲线 延迟时间 播放次数 是否逆向播放 播放完后是否回到起始状态; */
animation: name duration [timing-function] [delay] [iteration-count] [direction] [fill-mode];

• 简写属性里面不包含 animation-play-state
• 暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
• 想要动画走回来 ，而不是直接跳回来：animation-direction ： alternate
• 盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

动画实现呼吸效果

<div class="box"></div>

        .box {
            width: 100px;
            height: 100px;
            margin: 40px auto;
            border-radius: 50%;
            background-color:rgba(255, 255, 255, 0.6) ;
            animation: breathe 2700ms ease-in-out infinite alternate;
        }

        @keyframes breathe {
            0% {
                opacity: .2;
                background-color:rgba(255, 255, 255, 0.6) ;
                box-shadow: 0 1px 2px rgba(255, 255, 255, 0.4)
            }

            100% {
                opacity: 1;
                background-color:rgba(255, 89, 0, 0.6) ;
                box-shadow: 0 1px 30px rgba(255, 89, 0, 0.6)
            }
        }

实时效果反馈

1.动画属性中，iteration-count: infinite 属性的作用是：

A 设置动画效果时间

B 设置动画效果速率

C 设置动画的开始时间

D 设置动画无限循环

答案

1=>D