Задержка анимации на определенном проценте?

Question

[Анита Ковалева]

Всем привет, стилизую Contacts Form 7, задумка - сделать fixed блок выезжающий справа, сообщающий пользователю о неполном(либо неправильном) введенном поле.
Анимация длится 12 секунд, как сделать так, что бы блок вылезая на 50% анимации, делал задержку в 5-6 секунд, и снова уходил за пределы экрана. Погуглила, но нашла только задержку перед анимацией.

.wpcf7-validation-errors
    position: fixed
    top: 50%
    transform: translateY(-50%)
    width: 20%
    right: -30%
    padding: 15px
    background-color: #D2232A
    text-align: center
    animation: errorblock 12s ease-in-out

@keyframes errorblock
    0%
        right: -30%
    50%
        right: 3%
    100%
        right: -30%

Comments

[Rustam Bainazarov]

На CSS — никак. Делайте пустые keyframe'ы, чтобы эмулировать задержку (хак).

[Анита Ковалева]

Рустам Байназаров, Спасибо, каждый keyframe равен одной секунде по дефолту? или задается определенное число?

[Rustam Bainazarov]

Анита Ковалева, они не равны ничему, и у них нет изначального значения.

Формула расчета: animation-duration (которое вы задаёте самостоятельно) поделите на ваши keyframe'ы.

[Анита Ковалева]

Рустам Байназаров, Спасибо, очень помогли.

[Дмитрий]

Анита Ковалева, можно сделать два keyframe на появление и скрытие, и в свойстве анимации задать их два друг за другом со своими параметрами.... второму задать задержку несколько секунд
div {animation: show 1s ease-in 0.5s, hide 5s ease-out 4s;}

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

animation: errorblock_show 3s ease-in, errorblock_hide 3s ease-in 5s;
animation-fill-mode: forwards;

[Анита Ковалева]

Дмитрий, Спасибо, примерно так и сделала

Answer 1

[lagudal]

ну для полноты, можете все же поиграться с процентами в кейфрейме своем. Если ваша анимация занимает 12 секунд, и вам надо, чтобы на середине она встала примерно на половину времени, так и напишите что то вроде:

@keyframes errorblock
    0%
        right: -30%
    33%
        right: 3%
    66%
        right: 3%
    100% 
         right: -30%

и сделайте анимацию уже не 12 а 18 секунд. Т.е. время увеличится на треть - первые 6 сек выйдет, вторые 6 сек будет на месте стоять и последние 6 сек уйдет назад. Ну вот с этими 33 и 66 % можете поиграться.
Именно таким образом чаще всего стилизуют css слайдеры.