时间戳

首页 > 解决方案 > 文本显示 CSS 动画

css - 文本显示 CSS 动画

问题描述

这是我的第一篇文章。我正在尝试仅使用 CSS 复制此动画：

例子

这是我到目前为止所拥有的

@keyframes text-clip {
    from {
        clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
        transform:translateY(100%)
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform:translateY(0);
    }
}

h1 {
    letter-spacing: -.015em;
    font-size: 3.5rem;
    font-weight: 400;
    line-height: 1.1;
    animation: text-clip 1.5s cubic-bezier(.77,0,.175,1);
}
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim accumsan tristique.</h1>

如您所见，它很接近，但并不完全相同。在我的动画中，段落从多边形向上展开，而文本也向上移动。

在我试图复制的那个中，每一行都是通过从固定位置的白色覆盖层滑出而显示出来的。似乎也出现了一些偏差。

有谁知道如何复制我发布的示例 gif？

标签： cssanimation

解决方案

推荐阅读