css连续动画（动画组）
CSS连续动画可以通过关键帧（@keyframes）和动画组合实现。以下是一个简单的例子，演示了如何创建一个连续的动画序列：
/* 定义关键帧 */
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
/* 应用动画到元素 */
.element {
animation: fadeIn 2s infinite, slideIn 2s infinite;
animation-delay: 0s, 1s; /* 动画延迟，确保动画顺序播放 */
}在这个例子中，.element 将会首先淡入然后滑入屏幕。fadeIn 和 slideIn 是定义好的关键帧动画，通过 animation 属性同时应用到 .element 上，并通过 animation-delay 分别设置两个动画的开始时间，以此实现连续动画的效果。infinite 关键词确保动画会无限次数地重复播放。
评论已关闭