css过渡和动画区别？

一、过渡

1、概念

transition过渡属性是CSS3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加 “补间动画”。过渡包含四个小属性，如下

属性	意义
transition-property	哪些属性要过渡
transition-duration	动画时间
transition-timing-function	动画变化曲线（缓动效果）
transition-delay	延迟时间

2、哪些属性可以参与过渡

• 所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius
• 背景颜色和文字颜色都可以被过渡
• 所有变形（包括2D和3D）都能被过渡

3、过渡的缓动效果

transition的第三个参数就是缓动参数，也是变化速度曲线，常用缓动参数如下（曲线越陡速度越快）

transition-timing-function.png

缓动参数可以使用贝塞尔曲线值来设置，网站 https://cubic-bezier.com/ 可以生成贝塞尔曲线，可以自定义动画缓动参数，拖动曲线得到自己想要的变化曲线后，复制cubic-bezier即可

二、动画

1、可以使用@keyframes 来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀
2、定义动画之后，就可以使用animation属性调用动画

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

        /* 
            name: 动画名字
            duration: 总时长
            timing-function: 缓动效果
            delay: 延迟时间
            iteration-count: 执行次数，永远执行写infinite，可不写
            direction: 想让动画的2、4、6...（偶数次）自动逆向执行，加上alternate参数即可，可不写
            fill-mode: 想让动画停止在最后结束状态，加上forwards，可不写
         */
        animation: name duration timing-function delay iteration-count direction fill-mode;
        animation: r 3s linear 0s infinite;