(2019)[前端]面试题[8]：CSS动画中的transition和animation

问题

CSS动画中的transition和animation

Hello，欢迎来到我的博客，每天一道面试题，我们共同进步。

解答

CSS中和动画有关的属性有两种：transition和animation

其中animation和关键帧配合使用【@keyframes】

transition

我们先来看一个简单例子：

<body>
    <div class="box"></div>
</body>

<style>
    .box {
        height: 100px;
        width: 100px;
        background-color: lightpink;
        transition: width 1s 0.5s ease-in-out;
    }

    .box:hover {
        width: 200px;
    }
</style>

截图-1570238142

有一个很有意思的现象：如果把transition: width 1s 0.5s ease-in-out;写在:hover上会怎样？

也即：

.box:hover {
    width: 200px;
    transition: width 1s 0.5s ease-in-out;
}

截图-1570238304

看出区别了吗？其实写在hover上也是可以的，但是当我移出元素后，元素宽度立马恢复，而没有过渡！

原因很简单，你transistion只写在hover上，也就是说只有鼠标移上去的时候，该伪类才生效。

transition常用属性

transition 属性是一个简写属性，用于设置四个过渡属性：

ransition-property ：规定设置过渡效果的 CSS 属性的名称【比如width,height,background等等】。
transition-duration ：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function ：规定速度效果的速度曲线。
transition-delay ：定义过渡效果何时开始【可理解为延迟】。

transition特性

需要具体数值，不能用block,none等
transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
一次性，不能重复发生，除非一再触发
只有两个状态：开始和结束状态
一条transition规则只能定义一个属性

animation

animation就是为了解决以上问题的

transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生

一次性，不能重复发生，除非一再触发

只有两个状态：开始和结束状态

一条transition规则只能定义一个属性

还是来看一个例子：

<body>
    <div class="box"></div>
</body>

.box {
    height: 200px;
    width: 200px;
    animation: 3s type forwards alternate infinite;
    animation-play-state: running;
}

.box:hover {
    animation-play-state: paused;
}

@keyframes type {
    from {
        background: yellowgreen
    }

    50% {
        background: yellow
    }

    to {
        background: aquamarine
    }
}

截图-1570238910

当鼠标移入的时候暂停，移出的时候继续变换颜色。

animation常用属性

animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 1s;
animation-fill-mode(动画停留在): none(动画没开始时)/forwards(结束)/backwards(第一帧)/both;
animation-direction(动画播放方向): normal(正向)/alternate(交替慎用)/reverse(反向)/alternate-reverse(反向交替慎用);
animation-iteration-count(播放次数): 3/infinite(无限);
steps(10)函数实现分步过渡
animation-play-state(用于让动画保持突然终止时的状态):running(例如悬停时播放)/paused(非悬停时暂停)； 注意这个属性不能简写

以上某些代码参考：https://juejin.im/post/5c89d00ee51d454f4202f747