почему анимация @keyframe работает только один раз? - PullRequest
Новая
       11

почему анимация @keyframe работает только один раз?

1 голос
/ 26 сентября 2019

Поэтому я удалил непрозрачность из кода CSS из ответа на мой последний вопрос с помощью анимации @keyframe, и он почему-то работает только один раз.Помощь? 

header {
transition: height 600ms ease-in;
animation: yourAnimation 1s forwards 1s ease;

/* Define the dropdown-content transition styles on opacity, where
the opacity delay causes opacity of menu items to change after menu
animation (of 1sec) is complete */
.dropdown-content  {
display: grid;
    animation: yourAnimation 1s forwards 1s ease;
}

/* CSS modifier class for "header.open" causes height to change
when open class applied */
&.open {
height: 100%;
grid-template-rows: 50px 400px;
grid-row-gap: 20px;
grid-template-areas: 'dp logo start' 'dc dc dc';
}

/* When open modifier class applied to parent header, items in the
.dropdown-content child are set to be opaque/visible */
&.open .dropdown-content {
opacity: 1.0;
    animation: yourAnimation 1s forwards 1s ease;
}
}

JSFiddle: https://jsfiddle.net/lambsbaaacode/1bxnzcsr/

1 Ответ

1 голос
/ 26 сентября 2019

Вам необходимо установить количество итераций: 

animation-iteration-count: 2; // 0-infinite

https://www.w3schools.com/cssref/css3_pr_animation-iteration-count.asp

...