css3动画从左向右出现 |通用的css

/* 定义动画 */
@keyframes moveLeft {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* 应用动画 */
.animated {
animation: moveLeft 1s forwards;
}

在上面的代码中，大家首先使用@keyframes关键字定义了一个名为moveLeft的动画，其中from表示起始状态，to表示终止状态。大家使用transform属性设置位移效果，将元素从页面左侧移到页面中央，并通过opacity属性控制透明度，实现从无到有的渐现效果。

接着，大家将动画应用在具有.animated类名的元素上，使用animation属性指定动画名称、动画时长（1s）以及动画完成后是否保持最后一帧的状态（forwards）。这样，大家就实现了从左向右出现的动画效果。