CSS Animation Basics

CSS Animations enable the front-end developer to animate HTML elements which in turn give your website a fun and cool look. In this post, we will take a deep dive into how to use animations in CSS. When you are done, you should have a good understanding of the topic. Try typing the code into your code editor and see how it works. This will help the concepts sink in deeper. Now let us take a look at this example. To use animations we have to use @keyframes. Keyframes are what CSS use to make animations. @ variable_name { 0% { : ; } 50% { : ; } 100% { : ; } } { : variable_name animation-duration: ; : ; : ; : ease-in / ease-out / ease-in-out / linear / (0, 0, 1, 1); : paused / running; : normal / reverse / alternate / alternate-reverse animation-fill-mode: none / forwards / backwards; } keyframes opacity 0 opacity 0.5 opacity 1 .class_name animation-name 3s animation-delay 3s animation-iteration-count 3 animation-timing-function cubic-bezier animation-play-state animation-direction To make the usable, you can declare it inside a class using the property name. This invokes the that you have just created. @keyframes animation_name @keyframes These two CSS properties are the only ones that are required to fully use @keyframes. This is the time that is required for the animation to work. animation-duration : : This property waits for the specified amount of time before the animation starts taking effect. animation-delay The specifies the number of times the @ will happen. animation-iteration-count keyframes The describes how fast or how slow the parameters specified in the will happen over time. Its sub-properties are: animation-timing-function @keyframes : The animation will start at a normal pace and then accelerate over time. ease-in : The animation will at the normal pace and then decelerate over time. ease-out : The animation starts slower, then speeds up in the middle and then slows down at the end. ease-in-out : This will give the animation a constant speed, hence there will be no acceleration or deceleration. linear : This value allows us to create our custom It contains four values. The first value is the starting point of the x-axis, the second value is the starting point of the y-axis, the third value is the endpoint of the x-axis and the fourth value is the endpoint of the y-axis. cubic-bezier animation-timing-function. The has the option of the and value. The value makes the animation proceed as normal. The value makes the animation pause and when the value is set back to it continues from where it was left off. animation-play-state paused running running paused running The determines whether an animation should play forwards, backwards or alternating back and forth. animation-direction : This moves the class forwards to the end of the defined x-axis and when done it resets the position. This is the default value. normal : This moves the class backwards from the end of the defined x-axis to its original position. reverse : This moves the class forwards to the end of the defined x-axis then backwards to the original position. alternate : This moves the class backwards from the end of the defined x-axis to the original position. alternate-reverse Then displays the animation styles before and after the animation plays. Its values are: animation-fill-mode : The animation will not apply any styles to the class or target. none : The animation will set the value to the last keyframe. In our case, it will be the 100% value in the @keyframes. forwards : The animation will set the value to the first keyframe. In our case, it will be the 0% value in the @keyframes . backwards variable_name : It applies the forwards and the backwards fill-mode. both There is a shortcut to declare animation property values. This is the preferred arrangement of values when using the shortcut. : animation animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state. So we have taken a good look at animations. You have learned how to use @keyframes and the different sub-properties of animation. It isn’t difficult. Keep using them and they will seem easier with time.