Анимация ключевого кадра: наведение курсора не подчиняется «упрощенной» части анимации при отпускании мыши
У меня есть последовательность анимации из 3 шевронов, настроенная для кнопки «Назад», которую я разработал. Анимация запускается при наведении именно так, как я этого хочу, но она не учитывает ease-out часть свойства анимации, когда я нахожусь вне кнопки. Я знаю, что обычно с анимацией CSS вы исправите это, поместив анимацию на фактический элемент, а не на состояние :hover, но проблема в том, что анимация ключевого кадра срабатывает при загрузке страницы и становится немного шаткой при :hover. Есть ли состояние, похожее на отключение мыши или наведение курсора, которое я мог бы использовать, чтобы, когда пользователь отходит от кнопки, анимация уменьшалась или даже менялась? Я попытался добавить свойство animation-direction: reverse; к базовым элементам, но это ничего не дало, вероятно, потому, что он не знает, о какой анимации я говорю, потому что его нет в базовых элементах по вышеуказанным причинам. Возможно, мне нужен какой-то CSS или javascript, чтобы предотвратить запуск анимации до тех пор, пока действительно не произойдет состояние :hover, а затем я мог бы поместить анимацию в базовые элементы вместо состояния :hover?
https://jsfiddle.net/astombaugh/L7k1r63f/54/
<body style = "background-color: #214365">
<div class = "backBtn">
<div class = "chevronContainer">
<div class = "backBtnChevronTop"></div>
<div class = "backBtnChevronMid"></div>
<div class = "backBtnChevronFar"></div>
</div>
Back
</div>
</body>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap');
.backBtn {
font-family: Oswald, Univers, Helvetica Neue, Helvetica, Arial;
display: inline-block;
position: absolute;
left: 4rem;
font-weight: 700;
width: auto;
height: auto;
color: white;
background-color: transparent;
padding: 0.2rem 0em 0.1rem 0em;
margin: 0rem 0rem 0rem 0rem;
text-align: center;
text-decoration: none;
font-size: 1.6em;
word-spacing: normal;
cursor: pointer;
}
.chevronContainer {
display: inline-block;
position: relative;
transform: translateY(-1.3rem) translateX(-1rem);
}
.backBtnChevronTop {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 1;
height: 1.33rem;
width: 1.33rem;
}
.backBtnChevronMid {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtnChevronFar {
content: url(https://i.imgur.com/YHZi17i.png);
filter: invert(1);
position: absolute;
opacity: 0;
height: 1.33rem;
width: 1.33rem;
animation-direction: reverse;
}
.backBtn:hover .backBtnChevronMid {
animation: animateChevronMid 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn:hover .backBtnChevronFar {
animation: animateChevronFar 0.6s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes animateChevronTop {
0% {
transform: translateX(0rem);
opacity: 0;
}
70%,
100% {
transform: translateX(0);
opacity: 1;
}
}
@keyframes animateChevronMid {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-0.7rem);
opacity: 1;
}
}
@keyframes animateChevronFar {
0% {
transform: translateX(0);
opacity: 0;
}
70%,
100% {
transform: translateX(-1.4rem);
opacity: 1;
}
}
Вероятно, вы можете решить эту проблему, добавив переход к элементу, когда нет наведения, но я не проверял это. Решение как всегда найдено на csstricks :) css-tricks.com/разные-переходы-для-наведения-на-наведении-выкл.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вероятно, вы можете решить эту проблему, добавив переход к элементу, когда в данный момент нет наведения, и немного подправив ключевые кадры. Как это:
.backBtn .backBtnChevronMid {
animation: animateChevronMid2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
.backBtn .backBtnChevronFar {
animation: animateChevronFar2 0.6s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes animateChevronMid2 {
0% {
transform: translateX(-0.7rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
@keyframes animateChevronFar2 {
0% {
transform: translateX(-1.4rem);
opacity: 1;
}
70%,
100% {
transform: translateX(0);
opacity: 0;
}
}
эти дополнительные ключевые кадры полностью противоположны ключевым кадрам, которые вы сделали. И они применяются, когда вы перемещаете курсор от элемента (так сказать, при наведении курсора).
Так что это ПОЧТИ приводит меня туда, за исключением анимации, воспроизводимой при загрузке страницы. Я нашел статью на сайте, на который вы ссылаетесь, в котором есть элемент предварительной загрузки с некоторым javascript, но он предназначен для переходов CSS, а не для анимации. Есть ли способ адаптировать его к анимации? css-tricks.com/transitions-only-after-page-loadjsfiddle.net/astombaugh/L7k1r63f/78
вы можете добавить анимацию с помощью animation-play-state: paused, но, честно говоря, я никогда не использовал это. Но, согласно документам, это должно остановить вашу анимацию на элементе, тогда вы можете использовать load из статьи csstricks, чтобы переключить ее обратно в начало. Вот документы для animationplaystate developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state
Итак, благодаря тому, что вы предложили, а также большому количеству javascript, мне удалось заставить его работать: jsfiddle.net/astombaugh/L7k1r63f/985 ... за исключением того, что он не работает, когда я пытаюсь использовать его в моем реальном файле Visual Studio и на живом сайте. Я сразу начинаю получать ошибки в backBtnChevronMid.style.animation = "animateChevronMid 0.6s ease-in-out";, ошибка, которую выдает мне Chrome, это Uncaught TypeError: Cannot read properties of null (reading 'style'). Я не уверен, почему рабочий пример работает, но она не работает внутри браузера для реального сайта.
Мне удалось выяснить, что было причиной этого, а также удалось найти способ скрыть анимацию в <div>, потому что у меня есть несколько <div>, между которыми эта кнопка будет использоваться для переключения. jsfiddle.net/astombaugh/L7k1r63f/1097 Последнее, что я не могу понять, это почему onload с функцией pauseAnimation работает только при первой загрузке <div>. Если я вернусь от дочернего элемента div к родителю div и вернусь к дочернему элементу, при загрузке страницы будет воспроизводиться обратная анимация. Ничего страшного, но это просто очень странное поведение, которое я не могу отследить.
Говоря «Если я вернусь из дочернего div в родительский div и вернусь к дочернему», вы имеете в виду, что переходите на другую страницу? Потому что onload будет работать, но только когда ваша страница загружена (developer.mozilla.org/en-US/docs/Web/API/Window/load_event). Поэтому, если вы используете какой-то тип SPA-фреймворка или что-то в этом роде, загрузка может не запускаться (например, реакция на заменяет контент, а не перезагружается, чтобы сделать ваш сайт быстрее и т. д.). Использование обычных JS-решений не всегда является лучшим решением, например, для реакции (там, если вы хотите, чтобы это что-то делало при загрузке, вы добавляете его в useefect).
На самом деле я имею в виду еще один <div> на той же странице. Таким образом, на странице есть 4 кнопки, вы нажимаете кнопку, и она запускает скрипт для замены родительской div на одну из 4 дочерних div в зависимости от того, какую кнопку вы нажимаете. Кнопка «Назад» предназначена для возврата к родителю div. Я думаю, что происходит то, что последняя анимация на кнопке выполняется либо при загрузке div, либо просто работает непрерывно, пока пользователь не вернется. Если onload работает только при загрузке страницы, я думаю, это не исправит. Может быть, мне следует изучить некоторые учебники по реагированию и посмотреть, подходит ли это.
Джек прав и опередил меня.
Вы можете использовать это и добавить переход fadeIn к самой кнопке «Назад». Это взломано, но поместите это на кнопку «Назад»:
animation: fadeIn 0.6s ease-in-out;
И настроить анимацию соответственно. Это будет работать один раз. Если вы не хотите затухания, просто переместите «стоп» ближе к концу, и это будет управлять контейнером, в котором хранятся другие анимации, поэтому весь ваш эффект не будет отображаться, пока он не загрузится:
@keyframes fadeIn {
0% {opacity:0;}
95% {opacity: 0}
100% {opacity:1;}
}
ease-outработает не так, как вы думаете. Это функция времени перехода, и она работает в конце анимации, поэтому ваша анимация будет продолжаться как обычно и в конце будет медленнее developer.mozilla.org/en-US/docs/Web/CSS/…. Так что это не относится к тому, когда вы перемещаете мышь от наведенного элемента