Keyframe animations - html

Question

I am a bit confused on how keyframes work exactly in this demo. Whats confusing me is that 0% and 100% are not defined but 25% and 75% are. But at 0% the 25% keyframe is active. I thought it wouldn't be active until 25% through the animation until it hits the 75% keyframe. Also when does the 75% keyframe stop 100%? If you could explain exactly what is happening it would be appreciated. I hope this question is clear. Thanks.
#-webkit-keyframes pulse {
25% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
}
#keyframes pulse {
25% {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
75% {
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
}
}
.pulse {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
width: 50px;
height: 50px;
background-color: blue;
}
.pulse:hover {
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
<div class="pulse">
</div>

Answer 1

hi if you don't need animation to happen then add
#keyframes <animation name>
{
0%,25%
{
animation here
}
75%,100%
{
animation here
}
}
what happens here is animation don't start up-to 25%, from 25% to 75% animation plays and stops after 75% until it reaches 100%