'How to prevent an animation from pausing between keyframes and, additionally, make it run even when not on mouse hover

I have a two part question regarding a single code. I've been trying to make a text the letters of which will jump and flip on hover and so far I've managed to produce some interesting results using simply css animations.

However, since I made the letters to rotate twice (360+360 deg), they finish the first rotation, pause and then proceed to make the second rotation. Is it possible to make the two rotations seamlessly compliment each other. Perhaps I should fiddle with the timing-function (ease-in on the first and ease-out on the second?)?

The second part of my question is probably concerned with java script. I've spent some time looking for an answer to my question and java script seems to be the only answer. I want the animation to continue even after the mouse is no longer over the letter. I found this similar question here: css3 animation on :hover; force entire animation However, after some fiddling with it, I couldn't make it work on my code. I would be very grateful if someone could help me out with it. This is the code I've been working with: https://jsfiddle.net/j3j5vLL9/. The JS part doesn't work.

@keyframes jump {
  0% {transform:scale(1, 1);bottom:0px;}
  10% {transform:scale(1.2, 0.7); bottom:0px;}
  20% {transform:scale(0.8, 1.2); bottom:0px;transform:rotateZ(0deg);}
  50% {transform:scale(1, 1); bottom:70px; transform:rotateZ(-360deg);}
  80% {transform:scale(1, 1); bottom:0px; transform:rotateZ(-720deg);}
  90% {transform:scale(1.2, 0.7);bottom:0px;}
  100% {transform:scale(1, 1);bottom:0px;}
}

Thanks in advance to anyone who cares to help. :)

javascripthtmlcss


Solution 1:[1]

For the effect you could change animation timming to animation-timing-function: cubic-bezier(1, 1, 0, 0). And for the js you can try Ismail's answer. It was a problem with the function :

With ease-in-out:
enter image description here
As you can see the function reaches a 0 point where the animation slows a bit. So you can change it with this:

enter image description here

JsFidlle

Solution 2:[2]

In your CSS you need to change :

.letter-jump:hover {
....
}

To:

.letter-jump.animated {
....
}

Check this demo: https://jsfiddle.net/9k87s39y/

Solution 3:[3]

you may need to play around with the keyframes but to have the text flip without pausing & continuous use infinite you can write a lot of what you got in shorthand .letter-jump { animation: jump 1s infinite ease-in-out; } you could add a pause in the keyframes so it would sit for 2 sec then flip etc, let me know if you need help on that.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Ismail RBOUH
Solution 3 Nick_O

Related Questions