2

Please tell me how to make a "smooth" animations.

I have the keyframes, which describes the behavior of the animation in the download. And at Hover, connects the other keyframes (animation and changes its course).

Between them the change occurs sharpness.

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

.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);
    }
}

Question: how at different keyframes at Hover to make the smooth transition of 2 types of animation?

I tried to make transition (shifts them to the desired trajectory at Hover and start a new animation, but smooth still was not).

Or how to start the animation with a place to stay until this animation ??

Prompt, all thanks in advance!

ennet
  • 216
  • 1
  • 2
  • 9
  • You mean that when you hover it has a sudden jerk of position and you want to avoid it? Because otherwise I don't see any problem with your fiddle. – Harry Aug 24 '15 at 07:45
  • Yes, I have this jerk of position – ennet Aug 24 '15 at 07:56
  • 1
    That is partially because of the `translateX(30px)` that you have in the `rotate360` keyframe rule. That moves the element in the X axis by 30 pixels and partly because when you change the animation then you can't make it end gracefully (atleast in Chrome). Have a look at this thread - http://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533 – Harry Aug 24 '15 at 08:01

0 Answers0