CSS Animations

Hi,

Recently I came across a cool looking animation on the office LaLiga Websitefor those of you who don't know what is LaLiga, then allow me to expand your knowledge 😋. Its a Football league (for our American friends its Soccer) in Spain and some of the greatest teams and players have played their. Enough about football this is not a forum to post about sports so I'll come back to its Loading Animation and in the first look I thought that is cool looking SVG animation. You can see the sample below:

If you look closely you'll see 3 different animation running on it. First one is pretty straightforward the fill rotates throughout the LaLiga Logo the second one is little subtle you can see each of individual section of the LaLiga logo is expanding and contracting and then third one is simple the inner circle part rotates in the opposite direction of the outer one, and seeing this I started to wonder how are they doing this so as every developer must I opened the good old dev tools and began inspecting it and boy I was surprised with what I saw.

They were not using svg but a really long image that contains all the states of the loading screen see below:

and there css code to achieve this illusion of single object rotating is quite smart I must say.

  width: 150px;
  height: 150px;
  background-image: url("https://assets.laliga.com/assets
/public/generic/spinnerBeat.png");
  animation: 1s steps(12) 0s infinite normal none running laliga;

@keyframes laliga {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 0px -1800px;
  }
}

So you see the css is quite simple with one interesting property the animation property. As per the Mozilla Docs The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. (No need to apply these in order).

Most of the properties are self-explanatory like the animation-name duration, delay and direction.

• animation-play-state this defines whether the animation should run or pause.
• animation-timing-function this defines how the animation will progresses through the duration of each cycle. (More on this later).
• animation-iteration-count this defines how many times the animation will run (Mostly its kept to infinite).

The interesting thing that they have done is to make sure only one image is visible from that long list of images by setting the width and height to 150px. next to keep that image changing from one to other is they are using animation-timing-function as steps(12) since there are 12 loading images in that long list if you count so within a second the image is changed 12 times and finally their key frames does the rest of the magic.

They have already divided the animation into 12 parts all they need to do now is to change the position of each part and that is what they are doing in key frames simply changing the position to 0px to -1800px (as they have reversed order in the image list for some reason). they just keep y axis moving for obvious reasons.

To be honest they used the old trick Walt Disney used to create animations moving a bunch really fast in a loop to create the sense of motion for the audience which is great touch in this modern world. 😍😍😍

In the next post I'll try to recreate this animation (at least some part of using SVGs) so keep an eye out 👓👓👓

If you liked this post then please leave a like and share it with your friends.