css – Smoothness of animation with different @keyframes

Question:

Hello everyone! Please tell me how to make the animation "smooth".

I have @keyframes which describes the loading behavior of the animation. And when hovering, another @keyframes (the animation and its progress changes).

Sharpness occurs between their change.

Here is an example of sharpness http://jsfiddle.net/g4wvqrL8/

Question: how to make a smooth change of 2 types of animation with different @keyframes when hovering?

I tried to make a transition (I shifted them to the desired trajectory when hovering and start a new animation, but there was still no smoothness).

Or how to start the animation from where the animation left off before?

Tell me, thank you all in advance!

.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);
  }
}
<div class="icons">
  <div class="icon-1">    
    <svg viewBox="0 0 70 76">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#red_box_on_v"></use>
    </svg>
  </div>
</div>    
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="red_box_on_v">
      <g>
        <polygon fill="#ED1C24" points="70,18 70,62 30.8,76 0.1,14"></polygon>
      </g>
      <g>
        <polygon fill="#C91D23" points="30.8,76 0,58.8 0.1,14 31,31.4"></polygon>
      </g>
      <g>
        <polygon fill="#A01D22" points="31,31.4 0.1,14 39.2,0.7 70,18"></polygon>
      </g>
    </g>
  </defs>
</svg>

Answer:

One of the options is to catch the end of the animation iteration and then turn it off. You may need to adjust the size of the containers, as the mouse moves off the container as you rotate.

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);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icons">
  <div class="icon-1">
    <svg viewBox="0 0 70 76">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#red_box_on_v"></use>
    </svg>
  </div>
</div>
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="red_box_on_v">
      <g>
        <polygon fill="#ED1C24" points="70,18 70,62 30.8,76 0.1,14 		"></polygon>
      </g>
      <g>
        <polygon fill="#C91D23" points="30.8,76 0,58.8 0.1,14 31,31.4 		"></polygon>
      </g>
      <g>
        <polygon fill="#A01D22" points="31,31.4 0.1,14 39.2,0.7 70,18 		"></polygon>
      </g>
    </g>
  </defs>
</svg>
Post Views: 0
Scroll to Top