CSS3过渡与动画

CSS3过渡与动画

过度的基本使用

transition过渡属性是CSS3浓墨重彩的特性,过渡可以为一个元素在不同样式之间变化自动添加“补间动画”。
过渡从IE16开始兼容,移动端兼容良好
曾几何时,网页上的动画特效基本都是由JavaScript定时器实现的,现在逐步改为使用CSS3过渡
优点：动画更细腻，内存开销小

transition属性有4个要素

transition: width 1s linear 8s;

transition: 过度属性 动画时长（秒） 变化速度曲线 延迟时间

所有数值类型的属性,都可以参与过渡,比如width、height、left、top、border-radius。
背景颜色和文字颜色都可以被过渡
所有变形(包括2D和3D)都能被过渡
如果要所有属性都参与过渡,可以写all

过渡的四个小属性

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

过度缓动效果

transition的第三个参数就是缓动参数,也是变化速度曲线

• ease 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
• linear 规定从开始到结束具有相同速度的过渡效果
• ease-in 规定缓慢开始的过渡效果
• ease-out 规定缓慢结束的过渡效果
• ease-in-out 规定缓慢结束的过渡效果
• cubic-bezier(n,n,n,n) 允许您在三次贝塞尔函数中定义自己的值

贝塞尔曲线

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

动画

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

@keyframes r {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

定义动画之后,就可以使用animation属性调用动画

animation: r 1s linear 0s;

第五个参数就是动画的执行次数

animation: r 1s linear 0s 3;

如果想永远执行可以写infinite

animations: r 1s linear 0s infinite;

如果想让动画的第2、4、6...(偶数次)自动逆向执行,那么要加上alternate参数即可

animation: movelr 2s linear 0s infinite alternate;

如果想让动画停止在最后结束状态,那么要加上forwards

animation: changeToCircle 1s linear 0s forwards;

多关键帧动画

@keyframes changeColor {
    0% {
        background-color: red;
    }
    20% {
        background-color: yellow;
    }
    40% {
        background-color: blue;
    }
    60% {
        background-color: green;
    }
    80% {
        background-color: purple;
    }
    100% {
        background-color: orange;
    }
}