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. is a method in which are manipulated to appear as moving images. Wikipedia Animation pictures Keyframes The keyframes are the main blocks to build an animation. A keyframe in and is a drawing that defines the starting and ending points of any . animation filmmaking smooth transition Wikipedia. Other important concepts are: are the drawings that create the illusion of motion. Wikipedia Inbetweens Also, is: Inbetweening Is the process of generating intermediate frames between two images, called , to give the appearance that the first image evolves smoothly into the second image. Wikipedia key frames 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 Take a look at this video that explains clearly the and . speed feeling. slow in(ease-in) 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 or property. transition animation 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. Transition 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. { :relative; : ; : left; : ; : ease-in; } { : ;
}
*In the real example add more styles but just ignore them the main styles to do an are here. .box position left 0 // Keyframe 1 transition-property // Add inbetweeners to "Left" property. transition-duration 800ms // Duration transition-timing-function // Speed feeling .box-hover left 450px I animation 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 defines which property are you going to animat and add inbetweeners. Also, defines the duration of the animation and the gives the ease-in or ease-out . transition-property transition-duration transition-timing-function speed feeling As you can see, CSS- are simple and handy property, unfortunately, you only can manage two keyframes. transitions Check this map that shows all related transition properties and possible values. To conclude, check to watch more examples of different ways to apply this property. w3schools Animation The main difference between and 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: transition animation https://codepen.io/edcrux/pen/XWJvOQy 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 connects the keyframes to the element where you apply the animation, the define how much time the animation takes, and 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. animation-name animation-duration animation-iteration-count Check this example to view how can we add more keyframes for the animation. https://codepen.io/edcrux/pen/XWJvGZv?editors=0110 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. Animating SVG: When to use CSS animation: https://youtu.be/GUEB9FogoP8 https://youtu.be/8kK-cA99SA0 Thanks for reading. See you soon.

Adobe

Ball

CodePen

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

What if We Add Some CSS Animations to Our Page?

Too Long; Didn't Read

Companies Mentioned

Edcrux

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What if We Add Some CSS Animations to Our Page?

Too Long; Didn't Read

Companies Mentioned

Edcrux

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES