css3动画从右边渐入 |css顶部停靠

/* HTML 布局 */
<div class="animation">
<p>这是一个CSS3动画</p>
</div>
/* CSS 样式 */
.animation {
position: relative;
}
.animation p {
position: absolute;
right: -100%;
animation: moveFromRight ease-in 0.8s;
}
@keyframes moveFromRight {
0% {
right: -100%;
}
100% {
right: 0;
}
}

首先大家在 HTML 中定义一个用于动画的 div，里面包含一个 p 标签。

在 CSS 样式中，大家设置 div 的 position 属性为 relative，以便对其后代元素进行绝对定位。同时，大家将 p 标签的样式设置为绝对定位和 right 属性为 -100%，这意味着这个元素开始时不可见且在 div 的右侧。

接着，大家使用关键帧动画（@keyframes）来定义动画效果。在开始帧（0%）中，p 标签的 right 值为 -100%。在结束帧（100%）中，它的 right 值为 0，这意味着它移动到了 div 的左侧，实现了从右边渐入的效果。

最后，大家将这个动画应用到 p 标签中，它将在 0.8 秒内从右侧渐入，并以 ease-in 的速度开始。