
Hello everyone, I hope your learning is going well. Today we are here to discuss Cascading Style Sheets, the language we employ to style an HTML document.
Cascading Style Sheets
CSS outlines the presentation of HTML components. This blog will teach you CSS Animation and Transitions at the beginner level.
CSS Animations
HTML components may be animated without JavaScript or Flash thanks to CSS.
An element can progressively switch from one style to another using animation. You are free to make as many CSS property changes as you like. You must first define the animation’s keyframes before you can utilize CSS animation.
The styles that an element will have at specific moments are stored in keyframes.
Keyframes Rules
When you include a CSS style specification inside of a @keyframes rule, the animation will periodically transition from the old style to the new style.
You must connect an animation to an element for it to function.
The “example” animation is linked to the div> element in the example that follows. The background color of the div> element will progressively transition from “red” to “blue” during the course of the animation, which will take 10 seconds:
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: blue;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 10s;
}
Specify the fill-mode For an Animation
Before the first keyframe is played or after the last keyframe is played, an element is unaffected by CSS animations. This behaviour may be overridden using the animation-fill-mode parameter.
When the animation is not playing, the target element’s animation-fill-mode attribute defines a style for it (before it starts, after it ends, or both). The following values are possible for the animation-fill-mode property:
- none: The default setting. The element won’t have any styles applied to it before or after the animation executes in the forward direction.
- forwards: The last keyframe’s style settings are retained for the element (depends on animation-direction and animation-iteration-count)
- backwards: Depending on the direction of the animation, the element will get the style values specified by the first keyframe and keep them for the duration of the animation delay.
- both: The animation will extend the animation qualities in both directions, adhering to the rules for both forward and backward motion.
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}

CSS Transitions
You need to mention two items in order to generate a transition effect the CSS property you wish to add an effect to, along with the effect’s duration
When modifying CSS properties, a technique to regulate animation speed is offered via CSS transitions. You may make changes to a property happen gradually over time rather than having them take effect right once. For instance, if you alter an element’s color from white to black, the change typically happens instantly. When CSS transitions are enabled, changes take place at predetermined time intervals that follow an acceleration curve.
Using transitions when highlighting menus
A common use of CSS is to highlight items in a menu as the user hovers the mouse cursor over them. It’s easy to use transitions to make the effect even more attractive.
First, we set up the menu using HTML:
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact Us</a>
<a href="#">Links</a>
</nav>
Then we build the CSS to implement the look and feel of our menu:
nav {
display: flex;
gap: 0.5rem;
}
a {
flex: 1;
background-color: #333;
color: #fff;
border: 1px solid;
padding: 0.5rem;
text-align: center;
text-decoration: none;
transition: all 0.5s ease-out;
}
a:hover,
a:focus {
background-color: #fff;
color: #333;
}

Browser Support for Transitions
Properties | Chrome | Edge | Firefox | Safari | Opera |
transitions | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transitions-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-durations | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
Hope, this blog will find you informative and relative in our next web development blog we will discuss about some other intresting topic, till then keep learning with THEAX.