CSS3动画

定义

 可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀

/* 定义动画 动画的名字 */
@keyframes identifier {
    /* 起始状态 */
    from{
        transform: rotate(0);
    }
    /* 结束状态 */
    to{
        transform: rotate(360deg);
    }
}

调用

使用animation属性调用动画

// 动画名字 总时长 缓动效果 延迟 执行次数
animation：identifier 1s linear 0s 3;

执行次数：永远执行：infinite

alternate和forwards

alternate：让动画的第2、4、6......（偶数次）自动逆向执行

animation：identifier 1s linear 0s infinite alternate;

forwards：让动画停止在最后结束状态

animation：identifier 1s linear 0s infinite forwards;

多关键帧动画

/* 多关键帧动画 */
@keyframes changeColor {
    0%{
        background-color: rgb(20, 201, 233);
    }
    20%{
        background-color: rgb(243, 24, 61);
    }
    40%{
        background-color: rgb(57, 24, 243);
    }
    60%{
        background-color: rgb(221, 243, 24);
    }
    80%{
        background-color: rgb(24, 243, 24);
    }
    100%{
        background-color: rgb(24, 243, 207);
    }
}