Здравствуйте. Сделал анимацию при наведении мыши двух блоков. Не могу додуматься как сделать обратный плавный эффект при убирании курсора.
https://jsfiddle.net/ynbfn515/ может надо было с переходами это сделать?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: none;
color: red;}
@keyframes vras{
100% {
left: 100px;
opacity: 0;
transform: scale(.9);
}
}
@keyframes vras2{
0%{
transform: scale(.9);
}
100% {
left: 0px;
opacity: 1;
transform: scale(1.1);
}
}
p{
left: 0;
margin-left: 100px;
position: relative;
width: 100px;
height: 200px;
background: black;
}
p:hover{
animation: vras 1s;
animation-fill-mode: forwards;
}
p:hover+h1{
animation: vras2 1s .7s;
animation-fill-mode: forwards;
}
h1{
left: 100px;
top: 0;
opacity: 0;
margin-left: 100px;
position: absolute;
width: 100px;
height: 200px;
background: black;
}
<p>Вопрос</p>
<h1>Ответ</h1>
:hover
, а при наведении изменять состояние элементаtransition
позволяет возвращать в исходное положение элемент в любой момент анимации... Если задача прям конкретно в этом, то лучше использоватьtransition
для анимации. А свойствоanimation
, ну, вроде бы, оно просто анимирует. По факту. Можно разве что остановить её свойствомanimation-play-state
. Хотя наверняка через библиотечки какие-нибудь можно этим манипулировать.. Но конкретно ради такой задачи, повторюсь, можно иtransition
ограничиться.