Плавность анимации при разных @keyframes

#css #css3 #анимация #css_animation

Всем привет! 
Подскажите пожалуйста, как сделать "плавность" анимации. 

У меня есть @keyframes, который описывает поведение анимации при загрузки. 
А при ховере, подключается другой @keyframes (анимация и ее ход меняется).

Между их сменой происходит резкость.

Вот пример резкости http://jsfiddle.net/g4wvqrL8/

Вопрос: как при разных @keyframes при ховере сделать плавную смену 2х типов анимация? 

Пробовала делать transition (смещала их на нужную траекторию при ховере и начинать
новую анимацию, но плавность все равно не было).

Или же как начинать анимацию с места, где остановилась анимация до этого??

Подскажите , всем заранее спасибо!



.icon-1 {
  width: 3em;
  height: 3em;
  margin: 85px auto;
  animation: pull 3s infinite reverse ease-in-out
}

.icons {
  width:80%;
  margin: 0 auto;
  height:90px;
}

.icons:hover {
  animation: rotate360 4s infinite reverse cubic-bezier(0.4, 0, 1, 1);
}

@keyframes pull {
  0% {
    transform: translateY(0px);
  }
  50%   {
    transform: translateY(-55px);
  }
  100%{
    transform: translateY(0px);
  }  
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg) translateX(30px);		
  }
  100%   {
    transform: rotate(360deg) translateX(30px);
  }
}

  
    
    
  
    
    



    

Ответы

Ответ 1

Один из вариантов, отловить конец итерации анимации и потом ее отключить. 
Возможно вам нужно подправить размеры контейнеров, так как при вращении мышь сходит
с контейнера. 

http://jsfiddle.net/g4wvqrL8/3/



$(function() {

  function whichTransitionEvent() {
    var t,
      el = document.createElement("fakeelement");

    var transitions = {
      "transition": "animationiteration",
      "OTransition": "oanimationiterationd",
      "WebkitTransition": "webkitAnimationIteration"
    }

    for (t in transitions) {
      if (el.style[t] !== undefined) {
        return transitions[t];
      }
    }
  }

  var transitionEvent = whichTransitionEvent();
  var $icons = $(".icons"),
    $icon1 = $(".icon-1");


  $icons.hover(
    function() {
      var self = $(this);
      $icon1.addClass("pause");
      $icons.addClass("animate-rotate");
    }, function() {
      $icons.one(transitionEvent, function(event) {
        $icons.removeClass("animate-rotate");
        $icon1.removeClass("pause");
      });
    }
  );


});
.icon-1 {
  width: 3em;
  height: 3em;
  margin: 85px auto;
  animation: pull 3s infinite reverse ease-in-out
}
.icons {
  width: 80%;
  margin: 0 auto;
  height: 90px;
}
.pause {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
}
.animate-rotate {
  animation: rotate360 4s infinite reverse forwards cubic-bezier(0.1, 0, 1, 1);
}
@keyframes pull {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-55px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes rotate360 {
  100% {
    transform: rotate(1turn);
  }
}


  

    
  




Ответ 2

все дело в смещении

@keyframes rotate360 {
    0% {
        transform: rotate(0deg) translateX(0px);        
    }
    100%   {
        transform: rotate(360deg) translateX(0px);
    }
}


http://jsfiddle.net/g4wvqrL8/2/