Добрый день подскажите пожалуйста. как реализовать анимацию исчезновения, а потом возникновения с задержками. -
Идея такая - на странице Есть картинка она видна 5с дальше идет её исчезновение
@keyframes hideMe {
0% {opacity: 1}
100%{opacity: 0}
}
#disapiring {
animation: hideMe 3s linear 5s 1}
Дальше на 5 сек когда картинку полностью не видно, идет замена её на другую картинку (может по средствам JS) и в этом #disapiring должна включаться анимация появления
@keyframes showMe {
0% {opacity: 0}
100%{opacity: 1}
}
дальше когда её полностью 100% видно снова идет цикл .
Дак пропиши шаги анимации с большим шагом и задай длинну анимации на 5сек побольше
Эммм чёт не уловил я мысли. Можно подробнее ? Для чего увеличивать длинну анимации?
Вообщем, ну насколько я знаю отдельный кусок анимации ты никак не выполнишь с задержкой, тебе надо чтоб она 5 секунд была видна, это animation-delay и он будет действовать на начало нимации, далее она исчезает и должна в течении 5 секунд быть не видна, следовательно делаем анимацию на 5 секунд длиннее, место 3-х, 8 секунд, и пишем keyframes такого вида 0%{opacity:0}
20%{opacity:0}
40%{opacity:0}
60%{opacity:0}
80%{opacity:1}
100%{opacity:1}
А вообще прочитай инфу про аницию на webref.ru как она работает, и какие фичи для нее есть, я в нее не вникал но по моим знаниям твою задачу можно осуществить примерно так, процентовку сам подбери
А ну можешь еще создать две анимации, у второй задержку по секундам сделай нужную и будет одна анимация которая скрывает элемент, и вторая которая его показывает с определенной задержкой:)
1 лайк