css3动画从左移到右 |文字高出超出 css

/* 设置动画效果 */
.box {
animation: move-right 2s ease-in-out;
/* 这里的2s表示动画持续时间为2秒，ease-in-out表示动画会先慢慢加快，再慢慢减慢 */
}
/* 定义动画规则 */
@keyframes move-right {
0% {
transform: translateX(-100%);
/* 元素初始状态，从左侧滑出 */
}
100% {
transform: translateX(0);
/* 动画结束时元素已经滑动到右侧 */
}
}

以上代码中，大家首先给要应用动画的元素添加了一个名为”move-right”的动画，然后在CSS的@keyframes规则中定义了动画的细节。在这个规则中，大家设置了元素的初始位置为左侧屏幕外，通过transform: translateX(-100%)来实现。然后，大家设置动画结束时元素的位置为右侧屏幕内，通过transform: translateX(0)来实现。这样一来，元素就会先从左侧滑动进来，完成一次平移动画。