0

Делаю сайт, в header есть вот такой текст, разбитый на два класса main и secondary.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
    <title>Автосалон</title>
</head>
<body>
    <div class="container">
        <header class="header">
            <img class="header__logo" src="icons/logo.svg" alt="Логотип Автосалон">
            <div class="header__box">
                <h1 class="title-first">
                    <span class="title-first__main">АВТОСАЛОН АВТОМОБИЛЕЙ ПРЕМИУМ КЛАССА</span>
                    <span class="title-first__secondary">lamborghini audi bmw mersedes </span>
                </h1>
                <a href="#" class="btn">открыть каталог</a>
            </div>
        </header>
    </div>
</body>
</html>

Вот что я к нему применил в плане стилей

.title-first
    color: #FFFFFF
    &__main
        display: block
        font-weight: 800
        font-size: 50px
        line-height: 60px
        letter-spacing: 10px
        text-transform: uppercase 
        margin-bottom: 10px
        animation-name: leftToRight
        animation-duration: 2s
        animation-delay: 2s
        animation-timing-function: ease
        backface-visibility: hidden
    &__secondary
        font-weight: 400
        font-size: 40px
        line-height: 48px
        letter-spacing: 5px
        animation-name: RightToLeft
        animation-duration: 2s
        animation-delay: 2s
        animation-timing-function: ease
        backface-visibility: hidden

@keyframes leftToRight
    0%
        opacity: 0
        transform: translateX(-100px)
    80% 
        transform: translateX(10px)
        
    100%
        opacity: 1
        transform: translateX(0px)
        
@keyframes RightToLeft
    0%
        opacity: 0
        transform: translateX(100px)
    80% 
        transform: translateX(-10px)
        
    100%
        opacity: 1
        transform: translateX(0px)

Почему transform, который я применил к secondary не работает, а в main работает? Более того, даже если применить leftToRight к secondary, всё равно не работает. Но opacity отображается верно и на 0 и на 100. Грубо говоря текст main ездит, а secondary не ездит.

1 ответ 1

0

всё дело было в строке display: block. Надо было добавить в &__secondary

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.