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%);
    }
}

CSS 流畅的文字动画

CSS smooth text animation

html

css

css-animations