2

Здравствуйте. Сделал анимацию при наведении мыши двух блоков. Не могу додуматься как сделать обратный плавный эффект при убирании курсора.

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>

3
  • 1
    чтобы анимация была плавная после выхода курсора за область элемента, нужно вешать css transition эффект на класс без :hover, а при наведении изменять состояние элемента
    – MasterAlex
    7 янв 2017 в 16:02
  • Насколько я знаю, свойство transition позволяет возвращать в исходное положение элемент в любой момент анимации... Если задача прям конкретно в этом, то лучше использовать transition для анимации. А свойство animation, ну, вроде бы, оно просто анимирует. По факту. Можно разве что остановить её свойством animation-play-state. Хотя наверняка через библиотечки какие-нибудь можно этим манипулировать.. Но конкретно ради такой задачи, повторюсь, можно и transition ограничиться.
    – wokalek
    7 янв 2017 в 16:07
  • @VostokSisters Что-то пита этого? jsfiddle.net/ynbfn515/1
    – PeGaS
    7 янв 2017 в 16:13

1 ответ 1

3

В комментариях я писал о transition. Вот, как бы сделал я.
Codepen.
Ниже привел код. Твой код я комментировал, а не стирал.
Собственно, нужно было ещё добавить какой-нибудь бек-элемент, который бы служил "пусковым элементом" для анимации, ведь если водить мышкой по тому месту, где раньше был p, то анимация будет дергаться. Это напомнило мне урок одного из моих любимых web-ютуберов. Рекомендую его посмотреть, он рассказывает (в том видео по ссылке) о transition, в том числе и про "поддергивания" при ховере и тоже использует фоновый элемент для решения этой проблемы. Дальше в плейлисте, если будет интересно, то популярно расскажет про свойство animation. Полезно.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: none;
  color: red;
}
div {
  display: inline-block;
  width: 100px;
  height: 200px;
  outline: 1px dotted orangered;
}
/* @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;
  transition: transform 1s ease 0s, opacity 1s ease 0s;
}
.wrap:hover p {
  /*     animation: vras 1s;
    animation-fill-mode: forwards; */
  opacity: 0;
  transform: translate(100px, 0px) scale(0.9);
}
.wrap:hover + h1 {
  /*     animation: vras2 1s .7s;
    animation-fill-mode: forwards; */
  opacity: 1;
  transform: translate(0px, 0px) scale(1.1);
  transition: transform 1s ease 0.7s, opacity 1s ease 0.7s;
}
h1 {
  /*     left: 100px; */
  top: 0;
  opacity: 0;
  /*     margin-left: 100px; */
  position: absolute;
  width: 100px;
  height: 200px;
  background: black;
  transform: translate(100px, 0px) scale(.9);
  transition: transform 1s ease 0s, opacity 1s ease 0s;
}
<div class="wrap">
  <p>Вопрос</p>
</div>
<h1>Ответ</h1>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.