Animations have become essential to modern web design, enriching user experiences and adding interactive elements to websites. Animation gives a fluid effect and interaction to the elements on a webpage. Animations itself has become part of every device, making interaction and presentation of elements fun and engaging.
In this guide, we will delve into the world of CSS animation techniques, and understand different CSS animation properties. Whether you're a beginner or an experienced developer, this tutorial will cover keyframes, transitions, and animation properties.
prerequisites
This Article expects you to have prior knowledge of CSS styling properties
A cup of coffee
What is CSS animation?
The animation on the website is controlled by the browser and starts running as soon as a user visits the page. The animation code is pre-set and doesn't require much action from the user. However, other forms of animation on the page, like an event countdown, are controlled by JavaScript programming language.
What properties are animatable in CSS?
All CSS properties are animatable, except when specified otherwise. Animation means that their values can be made to change gradually over a given amount of time.
See the properties in the table below:
CSS main animation properties
When working with CSS animations, there are two key properties that determine how they behave.
Transition
This property defines a one-time animation effect on an element. This type of animation only runs once and is repeated when the target element is interacted with again.example: setting a transition on a button element, will cause it to take effect when a user clicks or hover over the button, and is repeated if the action is repeated.
Transition properties and given value:
transition | A shorthand property for setting the four transition values into a single property |
transition-delay | Specifies a delay (in seconds) for the transition effect |
transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete from old value to new value. |
transition-property | Specifies the name of the CSS property the transition effect is for, the default value is |
transition-timing-function | Specifies the speed curve of the transition effect, the default value is |
When using the button example, the code should be specified as follows:
button {
background-color: #4caf50;
cursor: pointer;
}
button:hover {
background-color: red;
transition-property: all;
transition-duration: 2s;
transition-delay: 0.5s;
transition-timing-function: linear;
/*linear, ease, ease-in, ease-out, ease-in-out,*/
}
With this code snippet above, the button element will transition from green color to red color when hovered over.
The result:
The transition property provides a shorthand method to write the transition, all in one line. This makes the code cleaner and easy to maintain.
button:hover {
background-color: red;
/* transition-property: all;
transition-duration: 2s;
transition-delay: 0.5s;
transition-timing-function: linear; */
transition: all 2s 0.5s linear; /* shorthand method for better
readability*/
}
Animation
This CSS animation property creates a repeated animation on an element, which must be used together with the CSS keyframes property.
example: setting a animation on a button element, will cause it to take effect without a user clicking or hovering over the button, and it can be repeated to get users attention.
The animation property takes the following values:
animation | A shorthand property for setting all animation values into a single property |
animation-name | The animation name, which also will be specified in keyframes |
animation-delay | Specifies how many seconds or milliseconds the animation takes to complete from old value to new value. |
animation-duration | Specifies how many seconds or milliseconds an animation effect takes to complete |
animation-iteration-count | Specifies how many times the animation should be played. |
animation-timing-function | Specifies the speed curve of the animation effect, the default value is |
animation-direction | Determines whether the animation should move forward, backward, or both. Commonly used on elements their width will change, such as a progress bar element. |
animation-fill-mode | Specifies what value will apply once the animation starts executing |
animation-play-state | Determines if the animation Is paused or running |
The above table is the complete animation property values. With these values, a beautiful yet powerful animation can be created.
Just as the transition property, the code can be written like so:
.box-1 {
width: 100px;
height: 100px;
background-color: yellow;
animation-name: background-color;
animation-duration: 2s;
animation-delay: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: forwards;
animation-fill-mode: both;
}
The animation property also provides a shorthand method of writing the code and maintaining a cleaner codebase.
.box-1 {
width: 100px;
height: 100px;
background-color: yellow;
/* animation-name: background-color;
animation-duration: 2s;
animation-delay: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: forwards;
animation-fill-mode: both; */
animation: background-color 2s 0.5s linear infinite
forwards both; /* the shorthand method*/
}
The animation property depends on the CSS keyframes property to work, without declaring the keyframes it won't run. Therefore this leads us to CSS keyframes.
CSS keyframes
In CSS, the keyframes property is used to gradually change the styles of animation step by step. It gives you more control over the style to change at a given time during the animation execution.
The CSS keyframes property, accepts two main core parameters.
Identifier: This identifier also known as the animation name, is the selector given to the element to which the animation is applied.
Timeline range: This range is subdivided into two parts (from, to) and (percentage).
The timeline range determines the start state of the animation with a from indicating 0% offset and to sets the end animation at a 100% offset. Additionally, the percentage timeline range sets the animation at consecutive offsets, ranging from 0%, 10%, 15%, and up to 100%.
Declaring keyframes
To use keyframes, create a @keyframes rule with a name that is then used by the animation-name property to match an animation to its keyframe declaration. Each @keyframes rule contains a style list of keyframe selectors, which specify percentages along the animation when the keyframe occurs, and a block containing the styles for that keyframe.
@keyframes background-color {
0% {
background-color: yellow;
}
50% {
background-color: red;
}
100% {
background-color: brown;
}
}
The above code snippet declares a 3 consecutive animation time range, at 0% the background will be the default of yellow, at 50% the background color will be red, and at 100% the background will be brown color. Additionally, the animation-iteration-count is set to infinite, which indicates the animation will constantly repeat.
Use cases
Transition and animation are powerful tools used in various fields to enhance user experiences and improve visual presentations.
Transition: Allows the change of animation one time on an element during user interaction. Transitions are commonly applied to elements like buttons, menus, modals, and page changes to make the user experience more seamless and less abrupt.
Animation: The process of adding dynamic motion to elements, to mimic the illusion of movement, and to attract user attention. Animations can be applied to a wide range of scenarios, such as loading spinners, sliding panels, progress bars, and more. In user interfaces, animations can provide visual feedback, guide users' attention, and improve the perceived responsiveness of a website.
Conclusion
Animation provides visual effects for beautiful and effective interaction of elements. They enhance user experience and improve website presentation.
Throughout this beginner's guide, we've explored the fundamentals of CSS animations, from the basic syntax to the various properties and keyframes that can be utilized.
Remember, the key to mastering CSS animations is practice. Experiment with different properties, timing functions, and step-by-step style changes. Additionally, keep in mind the performance aspect, as smooth animations are essential for a positive user experience.
References
https://cssreference.io/animations/
https://udn.realityripple.com/docs/Web/CSS/CSS_animated_properties
https://www.w3schools.com/css/css3_animations.asp
That's a wrap! Like and drop your feedback in the comment section. Follow me on Twitter @dprincecoder and LinkedIn Prince Azubuike