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

无道 2019-10-05 0 条评论 前端相关 阅读30 手机阅读

问题

CSS动画中的transition和animation

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

解答

CSS中和动画有关的属性有两种:transitionanimation

其中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特性

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

animation

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

  1. transition需用事件触发【比如加个hover伪类】,不能在网页加载时自动发生
  2. 一次性,不能重复发生,除非一再触发
  3. 只有两个状态:开始和结束状态
  4. 一条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

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
修改: 10月05日 09:39
这篇文章还没有评论呢~
点击刷新/生成验证码