CSS动画中的transition和animation
Hello,欢迎来到我的博客,每天一道面试题,我们共同进步。
CSS中和动画有关的属性有两种:transition
和animation
其中animation
和关键帧配合使用【@keyframes】
我们先来看一个简单例子:
<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>
有一个很有意思的现象:如果把transition: width 1s 0.5s ease-in-out;
写在:hover上会怎样?
也即:
.box:hover {
width: 200px;
transition: width 1s 0.5s ease-in-out;
}
看出区别了吗?其实写在hover上也是可以的,但是当我移出元素后,元素宽度立马恢复,而没有过渡! 原因很简单,你transistion只写在hover上,也就是说只有鼠标移上去的时候,该伪类才生效。
transition常用属性
transition 属性是一个简写属性,用于设置四个过渡属性:
transition特性
animation就是为了解决以上问题的
还是来看一个例子:
<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
}
}
当鼠标移入的时候暂停,移出的时候继续变换颜色。
animation常用属性
animation-name
: rainbow;animation-duration
: 1s;animation-timing-function
: ease-in-out;animation-delay
: 1s;animation-iteration-count
(播放次数): 3/infinite(无限);steps(10)
函数实现分步过渡animation-play-state
(用于让动画保持突然终止时的状态):running(例如悬停时播放)/paused(非悬停时暂停); 注意这个属性不能简写