Переход между ключами анимации и падением ⇐ Html

[Anonymous]

Я новый ученик, и у меня недостаточно знаний о анимации. Я попытался реализовать простую анимацию, используя ключевые кадры и эффект колеи. Проблема в том, что если я навечу элемент, когда анимация еще не закончена, она мгновенно показывает зависанное состояние без какого -либо перехода сразу после анимации. Вы можете попробовать это ниже, чтобы увидеть, что я имею в виду. Как исправить это мгновенное изменение? -code-css lang-css prettyprint-override ">

Код: Выделить всё

@keyframes appear {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 1;
transform: translate(-50%, -50%) scale(0);
}
}

.element {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}

.element::after {
position: absolute;
content: "";
width: 80%;
height: 80%;
top: 50%;
left: 50%;
transform-origin: center;
background-color: crimson;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
animation: appear 2s ease-in-out;
transition: all 1s ease-in-out;
}

.element:hover::after {
transform: translate(-50%, -50%) scale(0.8);
}< /code>

Я пробовал , чтобы поддерживать конечный ключ, но это Предполагает, что эффект падения, я думаю. Код> Так что анимация не закончено). Он воспроизводит анимацию в течение первой половины продолжительности, а затем применяет переход между конечным ключом и состоянием наказания элемента. Почему это работает? Можно ли использовать эти неполные ключевые кадры? Это общее решение? Это решение также имеет какие-то ошибки, я думаю, но не такой большой, как первый фрагмент. ">
@keyframes appear {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
25% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
}

.element {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}

.element::after {
position: absolute;
content: "";
width: 80%;
height: 80%;
top: 50%;
left: 50%;
transform-origin: center;
background-color: crimson;
transform: translate(-50%, -50%) scale(0);
border-radius: 50%;
animation: appear 4s ease-in-out;
transition: all 1s ease-in-out;
}

.element:hover::after {
transform: translate(-50%, -50%) scale(0.8);
}< /code>
< /code>
< /div>
< /div>
< /p>
Какой лучший (или наиболее распространенный) способ решения этой проблемы? /п>

Подробнее здесь: https://stackoverflow.com/questions/794 ... -and-hover