CSS3动画-526互联

动画

动画（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;
        }

动画常用属性

属性	描述
@keyframes	定义动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	动画名称，必须
animation-duration	动画周期，默认是0，必须
animation-timing-function	动画的速度曲线，默认是“ease”
animation-delay	动画延迟开始时间，默认是0
animation-iteration-count	动画被播放的次数，默认是1，还有infinite（无限次）
animation-direction	每个动画周期结束后，动画是否逆向播放，默认是“normal“,alternate逆播放
animation-play-state	动画是否正在运行或暂停。默认是"running","paused"是暂停
animation-fill-mode	默认回到初始状态backwards，forwards是保持

timing-function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值为normal表示顺序播放
alternate	动画第奇数次顺序播放，第偶数次逆序播放

复合属性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)
            }
        }