css animation+transition triggered timed every 10 seconds AND on hover - html

Question

i'm using this code to trigger a css animation every 10 seconds
#keyframes tada_9122 {
0% { transform: scale(1) }
0.63291% { transform:scale(.9) rotate(-2deg) }
1.26582% { transform:scale(.9) rotate(-1deg) }
1.89873% { transform:scale(1.1) rotate(2deg) }
2.53165% { transform:scale(1.1) rotate(-1deg) }
3.16456% { transform:scale(1.1) rotate(2deg) }
3.79747% { transform:scale(1.1) rotate(-1deg) }
4.43038% { transform:scale(1.1) rotate(1deg) }
5.06329% { transform:scale(1) rotate(0) }
100% { transform:scale(1) rotate(0) }
}
.callToAction {
animation: tada_9122 10s linear infinite;
transform-origin: 50% 50%;
}
<div class="callToAction" style="width:100px;height:100px;background-color:red;">
</div>
But how can i also trigger the same animation when hovering .callToAction ?
This doesn't work:
.callToAction:hover {
animation: tada_9122 10s;
transform-origin: 50% 50%;
}

Answer 1

The solution for that is to create another keyframe with another name and use when hovering
#keyframes tada_9122 {
0% {
transform: scale(1)
}
0.63291% {
transform: scale(.9) rotate(-2deg)
}
1.26582% {
transform: scale(.9) rotate(-1deg)
}
1.89873% {
transform: scale(1.1) rotate(2deg)
}
2.53165% {
transform: scale(1.1) rotate(-1deg)
}
3.16456% {
transform: scale(1.1) rotate(2deg)
}
3.79747% {
transform: scale(1.1) rotate(-1deg)
}
4.43038% {
transform: scale(1.1) rotate(1deg)
}
5.06329% {
transform: scale(1) rotate(0)
}
100% {
transform: scale(1) rotate(0)
}
}
#keyframes tada_9122_2 {
0% {
transform: scale(1)
}
0.63291% {
transform: scale(.9) rotate(-2deg)
}
1.26582% {
transform: scale(.9) rotate(-1deg)
}
1.89873% {
transform: scale(1.1) rotate(2deg)
}
2.53165% {
transform: scale(1.1) rotate(-1deg)
}
3.16456% {
transform: scale(1.1) rotate(2deg)
}
3.79747% {
transform: scale(1.1) rotate(-1deg)
}
4.43038% {
transform: scale(1.1) rotate(1deg)
}
5.06329% {
transform: scale(1) rotate(0)
}
100% {
transform: scale(1) rotate(0)
}
}
.callToAction {
animation: tada_9122 10s linear infinite;
animation-delay: 1s;
transform-origin: 50% 50%;
}
.callToAction:hover {
animation: tada_9122_2 10s linear infinite;
transform-origin: 50% 50%;
}
<div class="callToAction" style="width:100px;height:100px;background-color:red;">
</div>

Answer 2

it will not work because you run the animation on the class for infinite and every 10s on the parent class you called .callToAction, so it as usual run the animation on the parent every 10s and not work the other animation in the same time when you hover on the same class, its already have animated,
solution: you can remove animation on the parent and run your animation just on the .callToAction:hover, it will work successfully,
or

Answer 3

The trick is to put your div callToAction inside another div with some class parent_callToAction and give animation to it on hover.
<div class="parent_callToAction">
<div class="callToAction"></div>
</div>
Also, give both the div the same dimension
.callToAction, .parent_callToAction{
width:100px;
height:100px;
background-color:red;
}
Here, is a SNIPPET
#keyframes tada_9122 {
0% { transform: scale(1) }
0.63291% { transform:scale(.9) rotate(-2deg) }
1.26582% { transform:scale(.9) rotate(-1deg) }
1.89873% { transform:scale(1.1) rotate(2deg) }
2.53165% { transform:scale(1.1) rotate(-1deg) }
3.16456% { transform:scale(1.1) rotate(2deg) }
3.79747% { transform:scale(1.1) rotate(-1deg) }
4.43038% { transform:scale(1.1) rotate(1deg) }
5.06329% { transform:scale(1) rotate(0) }
100% { transform:scale(1) rotate(0) }
}
.callToAction {
animation: tada_9122 10s ease infinite;
transform-origin: 50% 50%;
}
.parent_callToAction:hover{
animation: tada_9122 10s linear infinite;
transform-origin: 50% 50%;
}
.callToAction, .parent_callToAction{
width:100px;
height:100px;
background-color:red;
}
<div class="parent_callToAction">
<div class="callToAction"></div>
</div>