css中动画播放前隐藏 |css 定义列表

/* 隐藏动画元素 */
.animation {
opacity: 0;
visibility: hidden;
}
/* 在触发条件下显示动画 */
.animation.active {
opacity: 1;
visibility: visible;
animation: myAnimation 1s ease-in-out;
}
/* 定义动画属性 */
@keyframes myAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}

在上面的代码中，大家先将动画元素设置为不可见，并在触发条件下为其添加“active”类来显示元素并播放动画。在定义动画时，大家使用@keyframes关键字来定义动画的具体属性。

需要注意的是，因为动画元素在播放前被隐藏，所以在定义动画时，大家需要将元素的初始状态设置为所需初始状态，以免播放时出现突兀的变化。