Css3 анимация после окончания сбрасывает

Question

[boxxxer]

Такая ситуация есть div изначально в свойствах css у него opacity: 0
В итоге мне нужно что бы в конце анимации div показывался, во время анимации div показывается а по завершении исчезает почему так происходит?

Я понял, что после проверки анимации значения ставятся из класса heading5

HTML
<div class="heading5"></div>

CSS
.heading5 {
    width:409px;
    height:29px;
    opacity:0;
    -webkit-animation: heading5 4s 18s;
    -moz-animation: heading5 4s 18s;
    -ms-animation: heading5 4s 18s;
    -o-animation: heading5 4s 18s;
    animation: heading5 4s 18s;
}

@keyframes heading5{
 0%{opacity:1; top:189px;}
 20%{opacity:1;top:100px;}
 90%{opacity:1;top:130px;}
 100%{opacity:1!important;top:189px;}
}

Answer 1

[Руслан Касымов]

Используйте animation-fill-mode

Comments

[boxxxer]

Спасибо, получилось!

[Руслан Касымов]

не во что :)

Answer 2

[Максим Гречушников]

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

вам нужно animation-fill-mode

devdocs.ru/verstka/css3-animations-for-beginners