CSS-анимация и переходы не работают вместе

У меня работает анимация при наведении курсора на элемент, она работает нормально, но когда я нахожусь в выключенном состоянии (отпускаем мышь), переход работает не так, как ожидалось.

Мне нужен двухсторонний переход: при наведении курсора и при перемещении от элемента. («при наведении» и «при наведении»).

Как я могу этого добиться?

Вот мой рабочий пример и код ниже:

@-webkit-keyframes blobby-wiggle {
  0%,
  100%,
  25%,
  50%,
  75% {
    -webkit-transform: none;
    transform: none;
  }
  12.5% {
    -webkit-transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
    transform: scale(1.02, 0.98) rotate(2deg) translate3d(2px, -2px, 0);
  }
  37.5% {
    -webkit-transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
    transform: scale(0.995, 1.01) rotate(1deg) translate3d(-1px, 2px, 0);
  }
  62.5% {
    -webkit-transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
    transform: scale(1.01, 0.99) rotate(3deg) translate3d(1px, 1px, 0);
  }
  87.5% {
    -webkit-transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
    transform: scale(0.99, 1.02) rotate(4deg) translate3d(-2px, -1px, 0);
  }
}

@-webkit-keyframes project-hover {
  0% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
  }
  16% {
    -webkit-transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
  }
  100% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
  }
}

@keyframes project-hover {
  0% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(0);
  }
  16% {
    -webkit-transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
    transform: perspective(1600px) rotateX(20deg) rotateY(6deg) translateZ(64px);
  }
  100% {
    -webkit-transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
    transform: perspective(1600px) rotateX(0) rotateY(0) translateZ(130px);
  }
}

.product-heading {
  display: inline-block;
  position: relative;
  transition: all 0.5s ease-in-out;
  cursor: default;
  -webkit-animation: blobby-wiggle 8s ease-in-out infinite;
  animation: blobby-wiggle 8s ease-in-out infinite;
  &:hover {
    -webkit-animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    animation: project-hover 0.7s cubic-bezier(0.315, 0.605, 0.375, 0.925) 1;
    -webkit-transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 130px);
    transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 130px);
  }
  h3 {
    position: absolute;
    top: 50%;
    left: 10%;
    color: #fff;
  }
}

<div class = "product-heading">
  <img src = "http://via.placeholder.com/250x150" alt = "">
  <h3>Sample Heading</h3>
</div>

Есть ли возможность добавить сюда JS?

— 08.07.2018 15:40

спасибо за ваш интерес, но я решил это, используя 2 отдельных Div ... 1 для перехода и другие для анимации.

— 09.07.2018 06:25

html css

08.07.2018 14:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

134

Другие вопросы по теме

Имеет границу снизу после строки сетки css3

Выровнять метку кнопки в ячейке таблицы

Подконтент не масштабируется с помощью фонового CSS

Содержимое одного поплавка из ссылки в другом поплавке

Многоуровневый раскрывающийся список W3.CSS

Как сохранить набор элементов, заключенных в встроенный div?

Я столкнулся с ошибкой при включении html-файла в другой html-файл с помощью jquery

Кендо UI сетка угловая

Сбросить стиль для input [type = "submit"], чтобы он соответствовал input [type = "text"]

Переключение между URL-адресами IFRAME при нажатии кнопки

CSS-анимация и переходы не работают вместе

Другие вопросы по теме

Похожие вопросы