CSS 中的动画有两部分 - @keyframes 和动画-*。
第一部分要求我们定义@keyframes。
这让我们可以指定应在动画持续时间的不同点应用的 CSS 样式。
不同的时间点以百分比值指定。可以指定 0 到 100% 之间的任意数量的偏移位置。
from 可用于偏移 0%，to 与偏移 100% 相同。
@keyframes anim-name {
from { css-style-a }
to { css-style-b }
}
下面的 CSS 样式已为一个属性 - 背景颜色的三个时间点指定。
@keyframes colorit {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: silver; }
}
它也可以指定多个属性。
@keyframes colorit {
0% {
background-color: red;
left: 0px;
top: 50px;
}
50% {
background-color: yellow;
left: 50px;
top: 75px;
}
100% {
background-color: silver;
left: 200px;
top: 25px;
}
}
这里是一个属性列表，可用于控制如何完成样式转换以提供动画的 UI/UX。
每个子属性都设置动画的某些方面。
下面是名为 colorit 的 @keyframes 的定义，运行 3 秒。
div.box {
...
animation-name: colorit;
animation-duration: 3s;
...
}
所有子属性都可以使用动画简写在一行中指定。
animation: 3s colorit;
浏览器执行所需的数学计算并渲染适当的动画。
同样，动画属性允许设计者控制延迟、时间、次数（迭代）、方向等，以实现他的愿景。
以上是CSS 中的动画的详细内容。更多信息请关注PHP中文网其他相关文章！
