CSS3: плавный переход между анимациями меняется на: hover

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

@keyframes first-animation {
0% { transform: scale3d(1,1,0);}
50% { transform: scale3d(0.8,0.8,0); }
100% { transform: scale3d(1,1,0); }
};

@keyframes second-animation {
0% { transform: scale3d(1,1,0); }
70% { transform: scale3d(0.7,0.7,0); }
80% { transform: scale3d(0.9,0.9,0); }
100% { transform: scale3d(1,1,0);  }
};

div{
animation: first-animation 1.7s ease-in-out infinite;
}

div:hover, div:focus{
animation: second-animation 1.1s ease-in-out infinite;
}

Ответ 1

Я не думаю, что это может быть достигнуто с помощью масштабных преобразований.

Вы можете сделать трюк и перейти от scale() к translateZ(). Когда применяется перспектива, чистый эффект будет также масштабным. Но интересным моментом является то, что установка перспективы на высокое значение, этот масштабный эффект может быть очень мал. А перспектива - это анимативное свойство.

Недостатком является то, что нам нужно будет добавить 2 обтекания слоев... но конечным результатом является это. Я сохранил исходную версию для сравнения

@keyframes first-animation {
0% { transform: scale(1,1);}
50% { transform: scale(0.8,0.8); }
100% { transform: scale(1,1); }
}

@keyframes second-animation {
0% { transform: scale(1,1); }
70% { transform: scale(0.7,0.7); }
80% { transform: scale(0.9,0.9); }
100% { transform: scale(1,1);  }
}

.sample {
    background-color: lightblue;
    animation: first-animation 1.7s ease-in-out infinite;
}

.sample:hover {
animation: second-animation 1.1s ease-in-out infinite;
}

.dim {
    width: 200px;
    height: 200px;
}

.base1 {
    perspective: 1000px;
    transition: perspective 2s ease-out;
    position: absolute;
    left: 300px;
  top: 10px;
}
.base1:hover {
    perspective: 9999px;
}

.base2 {
    width: 100%;
    height: 100%;
    animation: animation1 1.7s ease-in-out infinite;
    perspective: 9999px;
    transition: perspective 2s ease-in;
}
.base1:hover .base2 {
    perspective: 1000px;
}

.inner {
    width: 100%;
    height: 100%;
    background-color: lightgreen;
    animation: animation2 1.1s ease-in-out infinite;
    transform-style: preserve-3d;
    perspective: 99999px;
}

@keyframes animation1 {
0% { transform: translateZ(0px);}
50% { transform: translateZ(-200px); }
100% { transform: translateZ(0px); }
}

@keyframes animation2 {
      0% { transform: translateZ(0px);}
     70% { transform: translateZ(-300px); }
     80% { transform: translateZ(-100px); }
    100% { transform: translateZ(0px); }
}

<div class="sample dim">SAMPLE</div>
<div class="base1 dim">
    <div class="base2">
        <div class="inner">DEMO</div>
    </div>
</div>

Ответ 2

Чтобы получить желаемый эффект, вам нужно будет использовать события анимации css3. в этом случае вам нужно использовать "AnimationIteration". Таким образом, вы можете запустить событие после итерации. Я добавил класс в конец этого события для второй анимации.

Демо-версия Codepen

$(document).ready(function() {
  var animationElement = $(".animation");

  $("body").on({
    mouseover: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.addClass("second-animation");
      });
    },
    mouseleave: function() {
      animationElement.one('webkitAnimationIteration mozAnimationIteration AnimationIteration', function() {
        animationElement.removeClass("second-animation");
      });
    }
  });
});

Ответ 3

Простое использование свойства обратного перехода путем определения свойств перехода в исходном состоянии примера, см. обратный переход здесь http://www.tutorialspark.com/css3/CSS3_Transitions.php

Ответ 4

Используете ли вы переход? Если нет, добавьте правила перехода в родительский div.

div{
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-ms-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}