过渡和动画

过渡：

显示某个属性【值变化】的过程

div{
        width: 100px;
        height: 100px;
        background-color: red;
        /* 复合属性写法 */
        /* transition: width 1s,background-color 1s; */
        /* 查看哪个属性过渡过程 */
        transition-property: width,background-color;
        /* 过渡时间 */
        transition-duration: 2s,5s;
        /* 迟延执行过渡效果 */
        transition-delay: 1s;
    }

动画

   定义动画 
 @keyframes 动画名字{
     动画过程
 }
 动画可以定义多个：
 初始化：一开始，初始化只会执行一次
 定义思路：
 1：找到初始化的样式；————>form
 2：确定变化后的样式；————>to
 3：确定如何变化的，变化的过程；————>form..to..改为0%...100%

 动画：
    1：如何定义动画，定义动画是【未执行】的
    2：如何执行动画
    3：怎么执行：执行时间，执行速度，延迟时间等。。。

    注意：动画通常与过渡结合使用

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

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

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

.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; */
        }