Чтобы создать плавающую анимацию текста в CSS, вы можете использовать несколько методов. Вот некоторые из них:

1. CSS-анимация. Вы можете использовать анимацию ключевых кадров CSS для создания плавающего эффекта. Определите анимацию с помощью правила @keyframesи примените ее к текстовому элементу с помощью свойства animation.

@keyframes floating {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}
.text {
    animation: floating 2s ease-in-out infinite;
}

<старый старт="2">

CSS-переходы. Другой подход — использовать CSS-переходы для анимации текста. Примените переход к свойству transformи измените его при наведении курсора или с помощью JavaScript.

3. Анимация JavaScript: вы также можете использовать JavaScript для анимации текстового элемента. Это дает вам больше контроля над анимацией и позволяет создавать более сложные эффекты.

const text = document.querySelector('.text');
function float() {
    text.style.transform = 'translateY(-10px)';
    setTimeout(() => {
        text.style.transform = 'translateY(0)';
    }, 1000);
}
setInterval(float, 2000);