- Home
- /
- CSS Animations
CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
- Home
- /
- CSS Animations
CSS Animations
CSS Animations allow us to bring life and motion to elements—without writing JavaScript. With just a few lines of CSS, you can animate anything from a background color to size, position, or even a full-blown UI component.
Basic Animation Structure
CSS animations are typically built using two things:
@keyframes: Defines what the animation will do
Animation properties: Controls how the animation behaves (duration, timing, repeat, etc.)
Step-by-Step: Create Your First Animation
Keyframes Syntax
@keyframes fadeColor {
from {
background-color: red;
}
to {
background-color: blue;
}
}
This animation smoothly changes the background color from red to blue.
Apply Animation to an Element
.box {
width: 200px;
height: 100px;
background-color: red;
animation-name: fadeColor;
animation-duration: 3s;
}
Adding Smooth Transitions with Keyframes
You can make your animation more detailed by using multiple percentages.
@keyframes slideFade {
0% {
transform: translateX(0);
opacity: 0.2;
}
50% {
transform: translateX(100px);
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 0.2;
}
}
Key Animation Properties
Here’s a breakdown of the most important properties to control animations.
animation-name
Defines the name of the keyframes you want to use.
animation-name: slideFade;
animation-duration
How long the animation lasts.
animation-duration: 2s;
animation-iteration-count
How many times the animation runs.
animation-iteration-count: infinite; /* or 1, 2, 3... */
animation-delay
Wait time before the animation starts.
animation-delay: 1s; /* Use negative value to start midway */
animation-direction
Controls the direction the animation plays.
animation-direction: alternate;
Options: normal
| reverse
| alternate
| alternate-reverse
animation-timing-function
Controls the speed curve of animation.
animation-timing-function: ease-in-out;
Options: linear
, ease
, ease-in
, ease-out
, ease-in-out
animation-fill-mode
Defines the style before/after animation runs.
animation-fill-mode: forwards;
Options: none
, forwards
, backwards
, both
HTML
Responsive Boxes – Learn With Arshyan
Responsive Box Layout
Box 1
Box 2
Box 3
Box 4
CSS
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.box-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.box {
flex: 1 1 22%;
padding: 40px 0;
color: white;
font-size: 18px;
border-radius: 6px;
}
.box1 { background-color: crimson; }
.box2 { background-color: seagreen; }
.box3 { background-color: dodgerblue; }
.box4 { background-color: goldenrod; }
/* Media Query: when screen width is 600px or less */
@media screen and (max-width: 600px) {
.box-container {
flex-direction: column;
align-items: center;
}
.box {
width: 80%;
font-size: 20px;
}
}
What Happens Here?
The
.box-container
usesflex-direction: row
for wider screens (default).Once the screen width drops below
600px
, the media query kicks in:The layout switches to
column
Boxes become centered and take up more width.
This is a simple but effective layout adjustment using only CSS.
When to Use Media Queries?
Use media queries when you need:
A different layout for mobile than desktop
Font sizes to adapt to screen size
Hiding or showing elements on specific devices
Changing grid or flex directions
Summary Table
Feature | Purpose |
---|---|
max-width | Triggers styles when screen is smaller than the given width |
min-width | Triggers styles when screen is larger than the given width |
orientation | Detects landscape or portrait mode |
screen type | Targets regular screens only |