CSS Transitions and Animations
CSS is not only used for styling web pages, but also for making them interactive and visually
attractive. Two important features that help in this are Transitions and Animations.
1. CSS Transitions
A transition means a smooth change from one style to another over a given time. Without
transitions, when a property changes (like width or color), it happens instantly. With transitions,
the change is gradual.
How to Use Transitions
To use a transition, we must define:
1. The CSS property we want to apply the effect to.
2. The duration of the effect.
If duration is not given, transition will not work (default = 0s).
Transition Properties
1. transition-property – The property to animate (e.g., width, height, color).
2. transition-property: width;
3. transition-duration – Time taken for the effect (seconds/ms).
4. transition-duration: 2s;
5. transition-delay – Time before the effect starts.
6. transition-delay: 1s;
7. transition-timing-function – Defines the speed curve.
o linear → constant speed
o ease → slow start, fast middle, slow end (default)
o ease-in → slow start
o ease-out → slow end
o ease-in-out → slow start and end
8. transition (shorthand) – Combines all in one line.
9. transition: width 2s linear 1s;
Example 1: Simple Hover Transition
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
div:hover {
width: 300px;
• The box grows smoothly when hovered.
• When the mouse leaves, it shrinks smoothly.
Example 2: Transition with Delay and Multiple Properties
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
• Width, height, and rotation all animate smoothly.
2. CSS Animations
While transitions require a trigger (like hover), animations can start automatically and can be
repeated multiple times.
They are more powerful because they allow defining multiple steps of style changes using
@keyframes.
Animation Properties
1. animation-name – The name of the keyframe.
2. animation-duration – How long one cycle takes.
3. animation-timing-function – Speed curve (same as transitions).
4. animation-delay – Delay before starting.
5. animation-iteration-count – How many times (number or infinite).
6. animation-direction – Normal, reverse, or alternate.
7. animation-fill-mode – Style before/after animation (none, forwards, backwards, both).
8. animation-play-state – Running or paused.
We can also use animation shorthand to combine all.
Defining Animations with Keyframes
The @keyframes rule defines how an element changes over time.
• 0% (or from) → Starting state.
• 100% (or to) → Final state.
• We can add intermediate steps like 25%, 50%, 75%.
Example: Moving Square
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: movebox;
animation-duration: 4s;
animation-iteration-count: infinite;
@keyframes movebox {
0% {background: red; left: 0px; top: 0px;}
25% {background: yellow; left: 200px; top: 0px;}
50% {background: blue; left: 200px; top: 200px;}
75% {background: green; left: 0px; top: 200px;}
100% {background: red; left: 0px; top: 0px;}
• The square moves around in a box path.
• The background color also changes at each stage.
• It runs forever because of infinite.
3. Transition vs Animation (Comparison Table)
Feature Transitions Animations
Trigger Needs a user action (hover, click) Can run automatically
Complexity Simple start and end Multiple steps using keyframes
Repetition Only runs when triggered Can repeat (infinite loops)
Control Limited to property + duration More control (direction, delay, iteration)
Use Cases Button hover, menu effects Loading spinners, banners, moving objects
4. Advantages of CSS Animations
1. No JavaScript needed – Easy for simple effects.
2. Better performance – Browser optimizes animations.
3. Smooth look – Enhances user experience.
4. Cross-browser support – Works on most modern browsers.
5. Efficiency – Animations in hidden tabs are paused to save power.
5. Practical Applications
• Transitions
o Button hover effects
o Navigation menu highlights
o Smooth color or size change
• Animations
o Loading indicators
o Banners and advertisements
o Game graphics and interactive pages
o Moving shapes or slideshows
6. Summary (Ready for Exam – 20 Marks)
• CSS Transitions → Used to make style changes smooth when triggered (hover, click).
Controlled by duration, delay, property, timing-function.
• CSS Animations → More advanced; allows multiple style changes defined by
@keyframes, can loop, and can run automatically.
• Both features make web pages modern, attractive, and user-friendly.
Class Selector in CSS
Definition
• A class selector in CSS is defined by a dot (.) followed by the class name.
• It is used to apply styles to any HTML element that has the same class attribute.
• Unlike element selectors (p, h1, etc.), a class selector represents a generic value that
can be reused.
Syntax
.classname {
property: value;
• .classname → Selector (dot + class name)
• property: value; → CSS styling rules
Example 1: Basic Class Selector
<style>
.myclass {
background-color: red;
</style>
<p class="myclass">This is a class selector</p>
<p>This is a normal paragraph</p>
Only the first paragraph with class="myclass" will have a red background.
Example 2: Class with Specific Element
• We can restrict a class to a specific HTML element.
• For example, h1.RedText applies only to <h1> elements having the class RedText.
<style>
h1.RedText {
color: red;
font-size: 14pt;
</style>
<h1 class="RedText">India is my country</h1> <!-- Style applied -->
<h1>I am very lucky</h1> <!-- No style applied -->
The first <h1> will be red and 14pt font size.
The second <h1> has no class, so no style is applied.
Key Points
1. Multiple elements can share the same class.
2. A single element can have multiple classes.
Example: <p class="myclass highlight">Text</p>
3. Class selectors are reusable, unlike id selectors (which are unique).
4. Class names are case-sensitive (.RedText ≠ .redtext).
Advantages
• Promotes reusability of CSS.
• Helps in grouping styles for different elements.
• Offers flexibility compared to element selectors.
