CSS进阶（七）过渡与动画

文章目录

CSS进阶（七）过渡与动画

一、缓动效果

背景

回弹效果：指当一个过渡达到最终值时，往回倒一点，然后再次回到最终值，如此往复一次或多次，并逐渐收敛，最终稳定在最终值。回弹效果的作用：

尺寸变化
角度变化

弹跳动画

我们希望小球下落方向上的调速函数是加速的（easy-out）。而弹起方向是减速的（ease-in）

@keyframes bounce {
    60%,80%,to{
        transform: translateY(400px);
        animation-timing-function: ease-out;
    }
    70% {
        transform: translateY(300px);
    }
    90% {
        transform: translateY(360px);
    }
}

.ball {
    animation: bounce 3s ease-in;
}

cubic-bezier()函数

允许我们指定自定义的调速函数。他接受四个参数，分别代表两个控制锚点的坐标值，
语法：cubic-bezier（x1,y1,x2,y2),曲线片段的两个端点分别固定在（0，0）和（1，1），x值限制在[0,1]
把锚点的水平坐标和垂直坐标互换，就可以得到任何调速函数的反向版本

@keyframes bounce {
    60%,80%,to{
        transform: translateY(400px);
        animation-timing-function: ease;
    }
    70% {
        transform: translateY(300px);
    }
    90% {
        transform: translateY(360px);
    }
}

.ball {
    animation: bounce 3s cubic-beizer(.1,.25.1.,25);
}

工具：cubic-bezier.com 的图形化工具

二、闪烁效果

@keyframes blink-smooth {
    50% {
        color: transparent;
    }
}

.highlight {
    animation: 1s blink-smooth 3 steps(1);
}

三、打字效果

解决方案

单行文本：让容器的宽度成为动画的主体，把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式，一个字一个字的扩展到它应有的宽度。

@keyframes typing {
    from { width: 0;}
}

@keyframes caret {
    50% { border-color: transparent;}
}

h1 {
    width: 15ch; /*文本的宽度*/
    white-space: nowrap; /*阻止文本折行*/
    overflow: hidden;
    border-right: .05em solid;
    animation: typing 6s steps(15),
        caret 1s steps(1) infinite;
}

四、状态平滑的动画

背景

假设我们有一张非常长的宽幅图片，但我们只能提供150×150的图片区展示它。我们决定在默认情况下只展示这张图片的左边缘，当用户跟他交互时，让它滚动在显示剩下的部分。

<div class="pic"></div>

@keyframes move {
    to{ background-position: 100% 0;}
}
.pic {
    margin: 150px;
    width: 300px;
    height: 300px;
    background: url("3.jpg");
    background-size: auto 100%;
    animation: move 10s linear infinite alternate;
    animation-play-state: paused;
}

.pic:hover,  .pic:focus {
    animation-play-state: running;
}