(2019)[前端]面试题[8]：CSS动画中的transition和animation
(2019)[前端]面试题[8]：CSS动画中的transition和animation
无道
发布于 2019-11-13 16:41:14
发布于 2019-11-13 16:41:14
问题
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(非悬停时暂停)； 注意这个属性不能简写
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-10-05，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录