2024年08月08日 建站教程
今天我们来介绍一下css3动画中keyframes用法介绍，这个比较简单，用@keyframes描述动画效果规则就可以了！
@keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
在一个@keyframes代码块里，包含着一系列的CSS规则，统称为 keyframes。一个 keyframe 定义了一个完整动画里某一时刻的一种动画样式。动画绘制引擎会连贯平滑的实现各种样式间的转换。在上面的被定义为 “bounce” 的动画中，有两个 keyframes: 一个是动画的起始状态( “from” 代码块) 和终止状态 ( “to” 代码块)。
一旦定义完成了动画后，我们就可以使用animation-name将其与动画目标元素关联起来。
div {
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
}
上面的这段CSS规则中就绑定了 “bounce” 动画，而且还设定了动画持续时间为 4 秒钟，一共执行10次，而且间隔着反向执行一次。
下面，我们要制作一个更复杂的动画，涉及到旋转、背景色、透明度等技术，需要用到多个 keyframes。
@keyframes pulse {
0% {
background-color: red;
opacity: 1.0;
transform: scale(1.0) rotate(0deg);
}
33% {
background-color: blue;
opacity: 0.75;
transform: scale(1.1) rotate(-5deg);
}
67% {
background-color: green;
opacity: 0.5;
transform: scale(1.1) rotate(5deg);
}
100% {
background-color: red;
opacity: 1.0;
transform: scale(1.0) rotate(0deg);
}
}
.pulsedbox {
animation-name: pulse;
animation-duration: 4s;
animation-direction: alternate;
animation-timing-function: ease-in-out;
}
效果就出来了！
本文链接：http://so.lmcjl.com/news/10282/