CSS平滑文本动画

Question

我是CSS动画的新手，我有三个不同的单词，希望每3秒更改一次。没关系，但我也想改变它；"平滑"；从左到右。若只存在纯CSS的解决方案，那个么它的优点。

这是我的基本html(块是diplay: block(

<div class="rotating-text-first block">
<span id="rotating-text" class="block">
</span>
</div>

和css-它不能正常工作

.rotating-text-first {
overflow: hidden;
animation: floatText 5s linear infinite;
}
#rotating-text::before {
content: '';
animation: spin 5s linear infinite;
}
@keyframes spin {
0% {
content: 'WEB';
}
33% {
content: 'E-SHOP';
}
66% {
content: 'APLIKACE';
}
}
@keyframes floatText {
0% {
max-width: 0%;
}
32.9% {
max-width: 50%;
}
33% {
max-width: 0%;
}
65.9% {
max-width: 50%;
}
66% {
max-width: 0%;
}
99.9% {
max-width: 50%;
}
}

Answer 1

我希望这个片段能解决您的问题或为您树立榜样。

• 只使用CSS和伪文本
• 你可以随心所欲地玩时间间隔游戏

.rotating-text-first {
overflow: hidden;
position:relative;
min-width: 100%;
height: 24px;
}
#rotating-text::before {
content: '';
position: absolute;
animation: spin 5s linear infinite;
transform: translateX(-102%);
}
@keyframes spin {
0% {
content: 'WEB';
transform: translateX(-102%);
}

8.333% {
transform: translateX(0);
}

16.666% {
transform: translateX(0);
}
24.999% {
content: 'WEB';
transform: translateX(-102%);
}
33.333% {
content: 'E-SHOP';
transform: translateX(-102%);
}
41.666% {
transform: translateX(0);
}
49.999% {
transform: translateX(0);
}
58.333% {
content: 'E-SHOP';
transform: translateX(-102%);
}
66.666% {
content: 'APLIKACE';
transform: translateX(-102%);
}
74.999% {
transform: translateX(0);
}
83.333% {
transform: translateX(0);
}
91.666% {
content: 'APLIKACE';
transform: translateX(-102%);
}
}

<div class="rotating-text-first block">
<span id="rotating-text" class="block">
</span>
</div>

为了使代码更短，下面将执行相同的操作。为了让上面的代码更容易理解，我写了很长的代码。

@keyframes spin {
8.333%,
16.666%,
41.666%,
49.999%,
74.999%,
83.333%{
transform: translateX(0);
}
0%,
24.999%{
content: 'WEB';
transform: translateX(-102%);
}
33.333%,
58.333%{
content: 'E-SHOP';
transform: translateX(-102%);
}
66.666%,
91.666%{
content: 'APLIKACE';
transform: translateX(-102%);
}
}