Блог

Главная - Вопросы по программированию - Сокращенная анимация не работает в моей таблице css

Сокращенная анимация не работает в моей таблице css

#css #animation

#css #Анимация

Вопрос:

У меня есть этот код, и я хотел бы использовать сокращенную анимацию, но она не работает.

 .box-thank-you__container .leads-container {
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
    animation-name: fadein;
    opacity: 0;
    animation-timing-function: ease-in;
    /*animation: fadein 0.3s ease-in forwards;*/
}

Это мой код ключевого кадра:

 @keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

Я прокомментировал сокращенную анимацию, потому что она не работает. Кто-нибудь знает почему?

Комментарии:

1. Добавьте также код ключевого кадра вашей анимации fadein или более подробно

2. да, вы также предоставляете общий доступ к коду ключевых кадров .. поскольку текущее сокращение правильное, возможно, проблема с кодом ключевого кадра.

3. Я также поделился кодом ключевых кадров. Смотрите выше.

4. Пожалуйста, найдите ответ ниже. Она работает нормально. Если вы ожидаете другого результата, пожалуйста, опишите это

5. Это работает, но сокращение, с другой стороны, нет. Это потому, что я использую два ключевых кадра?

Ответ №1:

Ваш код работает нормально. Я увеличил animation-duration для большей наглядности, пожалуйста, проверьте это: 

 .box-thank-you__container .leads-container {
    animation-duration: 3s;
    animation-fill-mode: forwards;
    animation-name: fadein;
    opacity: 0;
    animation-timing-function: ease-in;
    /*animation: fadein 0.3s ease-in forwards;*/
}
@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}  
 <div class="box-thank-you__container">
  <div class="leads-container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>

</div>

Согласно вашему обновленному коду, пожалуйста, проверьте ссылку ниже:

https://jsfiddle.net/fusp34y2/

Комментарии:

1. Я забыл сказать, что я использую 2 ключевых кадра. Но сокращение в этом ключевом кадре (fadein) не работает