CSS-анимация сбрасывается во время выполнения
Я использую ключевые кадры webkit для анимации некоторых прямоугольников. Судя по всему, анимация должна работать правильно. Я использую модификатор forwards, чтобы сохранить изменения анимации, и весь мой синтаксис правильный (см. мой CSS ниже). Однако каждый раз, когда я выполняю, кажется, что анимация сбрасывает каждое из изменений анимации по мере их появления.
Так, например, скажем, я изменяю ширину прямоугольника на 0%, а затем вращаю прямоугольник на 25%. По мере вращения ширина вернется к исходному значению. Я действительно не уверен, что здесь происходит. Мне не хватает фундаментального аспекта ключевых кадров?
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
-webkit-animation: close-top 5s forwards;
}
@-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5);}
100% {transform: rotate(-45deg);}
}
Избавится ли конкатенация от различий между преобразованиями? Мне нужно, чтобы каждое преобразование было заметно, а не размыто вместе
Ответы 3
Все этапы анимации являются настройками transform - если запускается новый, он заменяет предыдущий (предыдущие параметры возвращаются к значениям по умолчанию). Чтобы этого избежать, оставьте предыдущие значения / параметры в новой настройке преобразования и добавьте новый параметр / настройку, как показано ниже:
.test {
width: 100px;
height: 60px;
background: #fa0;
-webkit-animation: close-top 5s forwards;
}
@-webkit-keyframes close-top {
0% {
transform: translate(0px, 5px);
}
33% {
transform: translate(0px, 15px);
}
66% {
transform: translate(0px, 15px) scaleX(0.5);
}
100% {
transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);
}
}<div class = "test">TEST</div>Это из-за того, как работает свойство transform. Каждый раз, когда вы устанавливаете transform в ключевые кадры, вы перезаписываете предыдущее значение.
Вам нужно что-то вроде этого:
@-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: scaleX(0.5) translate(0px, 15px) ;}
100% {transform: rotate(-45deg) scaleX(0.5) translate(0px, 15px);}
}
Обратите внимание, как я сохраняю предыдущие преобразования в значении и добавляю новое изменение в начало списка.
Индивидуальные преобразования оцениваются справа налево.
каждый шаг переопределяет преобразование свойства предыдущего шага, вы можете добавить к этому свойству предыдущие изменения, например:
.navbar-toggler:not(.collapsed) .icon-bar:nth-child(1) {
opacity: 100;
background-color: black;
width: 100px;
height: 100px;
-webkit-animation: close-top 5s forwards;
}
@-webkit-keyframes close-top {
0% {transform: translate(0px, 5px);}
33% {transform: translate(0px, 15px);}
66% {transform: translate(0px, 15px) scaleX(0.5);}
100% {transform: translate(0px, 15px) scaleX(0.5) rotate(-45deg);}
}<div class='navbar-toggler'>
<div class='icon-bar'>
<div></div>
</div>
</div>
Возможно, вам потребуется объединить преобразования:
100% {transform: rotate(-45deg) translate(0px, 15px);}