0

Есть вот такой код, и transition в нем применяется, но нет плавности, как будто временные интервалы не проставлены вообще.

<div class="btn__holder">
                    <div class="btn__container">
                        <a class="btn" href="#">Тарифы</a>
                    </div>
</div>

.btn {
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;


    background-color: #cf0560;
    color: #fff;
    font-size: 20px;
    font-weight: 100;
    
    transition:
        background-color: 0.5s linear,
        color: 0.5s linear,
        font-weight: 0.5s linear,
        font-size: 5s linear;
}

.btn:hover {
    background-color: #FF83BB;
    color: #cf0560;
    font-weight: 600;
    font-size: 25px;
}
 
.btn__holder {
    width: 100%;
    height: 10vh;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}

.btn__container {
    margin: 0 auto;
    width: 33%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: #cf0560;
}
3
  • 1
    У Вас лишние двоеточия здесь - background-color: 0.5s linear, color: 0.5s linear, font-weight: 0.5s linear, font-size: 5s linear; Без них всё работает, как и должно.
    – Gene Erbin
    1 ноя 2022 в 13:12
  • @GeneErbin Спасибо, это сработало. Я не вижу, чтобы комментарий можно было отметить как ответ (тут просто нет зеленой/серой галочки)? Я смотрю где-то не там? В любом случае, спасибо еще раз
    – xenozar
    1 ноя 2022 в 13:40
  • Вы правы. Я прочитал правила сайта и обсуждения и понял, что неправильно поступил, дав ответ в комментарии. Теперь я оставил полноценный ответ, чтобы Вы могли закрыть этот вопрос. И всегда пожалуйста.
    – Gene Erbin
    1 ноя 2022 в 15:42

1 ответ 1

0

В представленном Вами коде есть синтаксическая ошибка - лишние двоеточия в перечислении свойств каждого используемого перехода (transition).

Неправильно:

transition:
    background-color: 0.5s linear,
    color: 0.5s linear,
    font-weight: 0.5s linear,
    font-size: 5s linear;

Правильно:

transition:
    background-color 0.5s linear,
    color 0.5s linear,
    font-weight 0.5s linear,
    font-size 5s linear;

Ваш ответ

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

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