css动画

/* 定义动画

 @keyframes 动画名字{
     动画过程
 }
 动画可以定义多个：
 初始化：一开始，初始化只会执行一次

定义思路：

1：找到初始化的样式；————>form
2：确定变化后的样式；————>to
3：确定如何变化的，变化的过程；————>form…to…改为0%…100%

*/
    @keyframes changeWidth {
        from {
            /* 初始化样式 */
            width: 100px;
        }

        to {
            /* 改变的样式 */
            width: 500px;
        }
    }

    @keyframes bac {
        0% {
            background-color: powderblue;
            /* transform: bac scale(0deg); */
        }

        10% {
            background-color: salmon;
            /* transform: bac scale(10deg); */
        }

        20% {
            background-color: sandybrown;
            /* transform: bac(20deg); */
        }

        30% {
            background-color: slateblue;
            /* transform: bac(30deg); */
        }

        40% {
            background-color: tomato;
            /* transform: bac(0); */
        }

        50% {
            background-color: yellow;
            /* transform: bac(0); */
        }

        60% {
            background-color: aqua;
            /* transform: bac(0); */
        }

        70% {
            background-color: cadetblue;
            /* transform: bac(0); */
        }

        80% {
            background-color: pink;
            /* transform: bac(0); */
        }

        90% {
            background-color: purple;
            /* transform: bac(0); */
        }

        100% {
            background-color: red;
            /* transform: bac(0); */
        }
    }

    @keyframes abc {
        0% {
            transform: rotate(0);
        }

        50% {
            transform: rotate(180deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .rotate {
        width: 100px;
        height: 100px;
        background-color: black;
        transition: 0.5s;
        transform-origin: 50% 50%;
        animation: abc 5s linear infinite;
        /*开始动画后无限循环，用来控制rotate*/
    }


    div {
        width: 100px;
        height: 100px;
        /* 动画执行 */
        animation: changeWidth 3s linear infinite, bac 3s linear infinite;
        background-color: black;
    }

    .bac {
        width: 100px;
        height: 100px;
        /* 执行定义的bac动画 */
        animation-name: bac;
        /* 执行时间2s */
        animation-duration: 2s;
        /* 执行速度：匀速 */
        animation-timing-function: linear;
        /* 执行次数：无限次 */
        animation-iteration-count: infinite;
        transition: 0.5s;
        /* transform-origin: 30px 30px; */
    }
</style>

动画：

1：如何定义动画，定义动画是【未执行】的
2：如何执行动画 3：怎么执行：执行时间，执行速度，延迟时间等。。。
注意：动画通常与过渡结合使用 -->

<div></div>
<div class="bac"></div>
<div class="rotate"></div>