Applied Visual Design @keyframes

HTML-CSS
1

In the exercise of applied visual design where we are using @keyframes to animate on hover over the register icon, I don’t understand the meaning of 100% here. Can someone please explain it in some easy words. And I also noticed that if I change the % then the time for it to appear is also changing. But how it is possible if we already define the time to 4sec? Please explain

2

It’s the time. 0% { do: something; } means do something when 0% time has elapsed, 100% { do: something; } means do something when 100% time has elapsed. If the animation lasts 4 seconds, 0% is 0 seconds, 100% is 4 seconds. If you change the % of time things happen at, then they will happen at different times.

3

so, it means that animation-time property is the maximum time the animation can take.

4

Yup. You set a time using that, then the keyframes give you granular control over when to trigger things.

Note that of you only have two states to animate between, you can just do:

@keyframes example {
  from {
    do: something;
    something: else;
  }
  to {
    do: something;
    something: else;
  }
}

Which is the same as

@keyframes example {
  0% {
    do: something;
    something: else;
  }
  100% {
    do: something;
    something: else;
  }
}
5

Thanks for quick response. You cleared my doubt.

1 Like