Have you ever watched the amazing animations of Tony Stark’s supercomputer? If so, do you remember when he was using his computer to build his armor suits or create a new element? It was amazing to see the smooth transitions in the UI (Jarvis) when he played with it. And what about if I tell you that now we can recreate some of these animations only with HTML and CSS.
I remember when I started designing webpages. I wanted to design it perfectly. I wanted to place the elements perfectly aligned, looking for the right typography and color. While I was designing, always I was taking care of what sensations the page gave to me, and also trying to get a design that gives to me a pleasant sensation when I was seeing it.
But what happens next? How can I get the same feeling that grabbed me when I saw Tony’s computer? After I’d been making several layouts from scratch I realized that something was missing to me.
Thus was when I start discovering and learning digital animation. I did some animation with Adobe After Effects, moving some elements from left to right, changing the opacity, adding some dynamic into the movement so on. It was so great to do it. After some time of practice, I got about some level of expertise on After Effects, and I decided to move on and try the same stuff on a web page.
In the beginning, I was so frustrated because of the way you could achieve some animation on Html. Before CSS3 it was really difficult to achieve some sort of animation without javascript. But fortunately, these days ago stayed in the past. And now we can get beauty animations just with plain CSS and HTML.
Some important concepts.
Before we dive into how to make CSS3 animation, It is better to keep track of some of the critical concepts to understand the properties to animate something.
Animation is a method in which pictures are manipulated to appear as moving images. Wikipedia
Keyframes
The keyframes are the main blocks to build an animation.
A keyframe in animation and filmmaking is a drawing that defines the starting and ending points of any smooth transition.
Wikipedia.
Other important concepts are:
Inbetweens are the drawings that create the illusion of motion. Wikipedia
Also, Inbetweening is:
Is the process of generating intermediate frames between two images, called key frames, to give the appearance that the first image evolves smoothly into the second image. Wikipedia
In the example below, I show a basic diagram of how animation works. The blue circle is the initial keyframe, and then the inbetweeners are the gray circles, the red circle is the final keyframe.
The more inbetweeners frames you draw in the same period, the more smooth the animation will be. Look at the same example with more frames.
Also, we could put in-between frames over different places, and give to our animation speed feeling. Take a look at this video that explains clearly the slow in(ease-in) and slow down(ease-out).
So now that you get some background and understanding of main concepts about animation, let’s start to use CSS animations.
Let’s code!
There are two options to make animation on CSS. We could use transition or animation property.
Transition helps us to calculate the inbetweeners of the key-frames, this property only works with two states, it means that you can only use two keyframes.
In this example, we are going to create a position keyframes. The first one has a value of 0px and the second of 450px, also we need to specify how much time going to take the animation. Watch the code below.
.box {
position:relative;
left:0; // Keyframe 1
transition-property: left; // Add inbetweeners to "Left" property.
transition-duration: 800ms; // Duration
transition-timing-function: ease-in; // Speed feeling
}
.box-hover {
left:450px;
}
*In the real example I add more styles but just ignore them the main styles to do an animation are here.Let’s see a real example:
Check the codepen example: https://codepen.io/edcrux/pen/XWJLGbL
I use some Javascript to track the position when you hover into the element. Here is a more simple example.
When you hover into the circle, the background changes.
The transition-property defines which property are you going to animat and add inbetweeners. Also, transition-duration defines the duration of the animation and the transition-timing-function gives the ease-in or ease-out speed feeling.
As you can see, CSS-transitions are simple and handy property, unfortunately, you only can manage two keyframes.
Check this map that shows all related transition properties and possible values.
To conclude, check w3schools to watch more examples of different ways to apply this property.
Animation
The main difference between transition and animation properties is that animation allows us to manage more than 2 states having more control over them. The reason behind this is that you could add more keyframes and adjust their behavior. Let’s see an example:
In the example above, I scale the element from his original size to double. This animation dure 2 seconds and then starts again. The property animation-name connects the keyframes to the element where you apply the animation, the animation-duration define how much time the animation takes, and animation-iteration-count property specifies how many times the animation will repeat. In this case, we could add more keyframes and the browser will calculate the in-betweens of all.
Check this example to view how can we add more keyframes for the animation.
In the original example the ball’s background color changes for 10 seconds with the colors that we apply in the keyframes. Check this image to see in detail what is the most important part of the code.
The place where we are putting the keyframes are defined by the percentage, in this case, the first keyframe is 0% of the timeline, the second is at 25% and so on.
You can add the properties that you want in each keyframe. So possibilities to create awesome animation are infinite.
TIP. Before you start animate something, build the static layout.
I hope with these examples you start understanding how we can create some animation. Here some links that help me to improve animation.
Thanks for reading.
See you soon.