CSS-анимация воспроизводится повторно после: анимации наведения

В приведенном ниже коде анимация отлично воспроизводится как при инициализации, так и при наведении курсора, однако, когда я прекращаю наведение курсора, начальная анимация воспроизводится повторно. Как мне остановить такое поведение? Спасибо,

Рик

.logoImage2{
  width:100%;
  -webkit-filter: drop-shadow(12px 8px 4px #222);
  filter: drop-shadow(12px 8px 3px #222);
  padding-bottom:2rem;
  animation: moveInTopRight 5s ease-out;
}

.logoImage2:hover{
  animation: spinY 5s ease-in-out;
}


   @keyframes moveInTopRight {
      0% {
        opacity: 0;
        transform: translate3d(50rem,-50rem,50rem) rotateZ(0);

  }
  80% {
    opacity: .5;
    transform: translate3d(5rem,5rem,5rem) rotateZ(180deg);

  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0) rotateZ(360deg);

  }
}
@keyframes spinY {
  0% {
 transform:rotateY(0);

  }
  50% {

    transform: rotateY(180deg);

  }
  100% {
    transform: rotateY(360deg);
  }
}

css css-animations

02.09.2018 21:42

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны использовать их в одной анимации, чтобы избежать перезапуска первой:

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
}

.box:hover {
  animation:moveInTopRight 5s ease-out, spinY 5s ease-in-out;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}

@keyframes spinY {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

<div class = "box">

</div>

И для этого конкретного случая вы можете заменить вторую анимацию переходом:

.box{
  width: 200px;
  height:200px;
  background:red;
  margin:50px;
  animation: moveInTopRight 5s ease-out;
  transition:0s;
}

.box:hover {
    transform: rotateY(360deg);
    transition:transform 5s  ease-in;
}

@keyframes moveInTopRight {
  0% {
    opacity: 0;
    transform: translate3d(50rem, -50rem, 50rem) rotateZ(0);
  }
  80% {
    opacity: .5;
    transform: translate3d(5rem, 5rem, 5rem) rotateZ(180deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateZ(360deg);
  }
}

<div class = "box">

</div>

02.09.2018 21:50

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

Анимация в каждой карточке страницы архива блога каменщика

Первый img bannermover не следует сразу после последнего img bannermove

SVG. Обратное изображение с помощью CSS. Храните изображение в том же месте

Переход слайдера @keyframes

Анимация перехода с использованием встроенных стилей (CSS или jQuery)

Координаты времени для анимации CSS

Анимация по ключевым кадрам с переходом от последнего к первому изображению вместо затухания

Анимация-воспроизведение-состояние приостановлено не работает, т.е

Вопрос производительности браузера и использования Bodymovin и CSS-анимации

Ошибка вращения, перевода и масштабирования CSS в анимации

CSS-анимация воспроизводится повторно после: анимации наведения

Ответы 1

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

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