CSS Transitions & Animations
Learn how to create smooth transitions and dynamic animations to enhance user experience.
1. `hover` + `background-color` Transition
Changes the background color smoothly on hover.
Hover to change background color!
.animated-box.hover-bg-transition {
background-color: lightblue;
transition: background-color 0.5s ease;
padding: 20px;
}
.animated-box.hover-bg-transition:hover {
background-color: lightgreen;
}
2. `transition-property`
Specifies the CSS properties the transition effect is applied to.
Hover to transition only the background color!
.animated-box.hover-bg-property {
background-color: lightblue;
transition-property: background-color;
padding: 20px;
}
.animated-box.hover-bg-property:hover {
background-color: lightgreen;
}
3. `transition-duration`
Sets the duration of the transition effect.
Hover me for a 1-second transition!
.animated-box.hover-bg-duration {
background-color: lightblue;
transition-duration: 1s;
padding: 20px;
}
.animated-box.hover-bg-duration:hover {
background-color: orange;
}
4. `transition-timing-function`
Defines the timing function for the transition effect.
Hover me to see easing!
.animated-box.hover-bg-timing {
background-color: lightblue;
transition: all 0.5s ease-in-out;
padding: 20px;
transform: scale(1);
}
.animated-box.hover-bg-timing:hover {
transform: scale(1.2);
}
5. `transition-delay`
Specifies the delay before the transition effect starts.
Hover me, delay added!
.animated-box.hover-bg-delay {
background-color: lightblue;
transition: background-color 1s 0.5s;
padding: 20px;
}
.animated-box.hover-bg-delay:hover {
background-color: yellow;
}
6. `@keyframes spin`
Creates a continuous spinning effect.
Spinning!
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animated-box.spin {
animation: spin 3s linear infinite;
width: 50px;
height: 50px;
background-color: lightcoral;
}
7. `@keyframes pulse`
Creates a pulsing effect by scaling the element.
Pulsing!
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.box {
animation: pulse 2s infinite;
}
8. `@keyframes slide-in`
Animates the element sliding in from the left.
Sliding In!
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
animation: slide-in 1s ease-out;
}
9. `@keyframes color-change`
Changes the background color through a gradient effect.
Color Changing!
@keyframes color-change {
0% {
background-color: red;
}
25% {
background-color: orange;
}
50% {
background-color: yellow;
}
75% {
background-color: green;
}
100% {
background-color: blue;
}
}
.box {
animation: color-change 4s linear infinite;
}
10. `@keyframes flip`
Flips the element vertically in a smooth motion.
Flipping!
@keyframes flip {
0% {
transform: rotateX(0);
}
50% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(360deg);
}
}
.box {
animation: flip 2s ease-in-out infinite;
}
11. `@keyframes grow`
Animates the growth of the element.
Growing!
@keyframes grow {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}
.animated-box.grow-animation {
animation: grow 2s infinite alternate;
padding: 20px;
background-color: lightblue;
}
12. `@keyframes shake`
Creates a shaking effect.
Shaking!
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
75% {
transform: translateX(10px);
}
}
.animated-box.shake-animation {
animation: shake 0.5s infinite;
padding: 20px;
background-color: lightgreen;
}
13. `@keyframes zoom-out`
Shrinks the element smoothly.
Zooming Out!
@keyframes zoom-out {
from {
transform: scale(1.5);
}
to {
transform: scale(1);
}
}
.animated-box.zoom-out-animation {
animation: zoom-out 2s infinite alternate;
padding: 20px;
background-color: lightpink;
}
14. `@keyframes glow`
Applies a glowing effect.
Glowing!
@keyframes glow {
0%, 100% {
box-shadow: 0 0 5px yellow;
}
50% {
box-shadow: 0 0 20px yellow;
}
}
.animated-box.glow-animation {
animation: glow 1s infinite;
padding: 20px;
background-color: lightyellow;
}
15. `@keyframes expand`
Expands the width of the element.
@keyframes expand {
0% {
width: 100px;
}
100% {
width: 200px;
}
}
.animated-box.expand-animation {
animation: expand 3s infinite alternate;
background-color: lightblue;
height: 50px;
}
2. `hover` + `scale` Animation
Scales the element up slightly on hover.
Hover to scale!
@keyframes scale {
from {
transform: scale(1);
}
to {
transform: scale(1.1);
}
}
.animated-box.hover-scale {
animation: scale 0.5s ease;
padding: 20px;
background-color: lightcoral;
}
3. `hover` + `box-shadow` Transition
Adds a shadow effect on hover.
Hover to see shadow!
@keyframes shadow {
from {
box-shadow: none;
}
to {
box-shadow: 10px 10px 20px rgba(0,0,0,0.5);
}
}
.animated-box.hover-shadow {
animation: shadow 0.5s ease-in-out;
padding: 20px;
background-color: lightyellow;
}
4. `hover` + Rotate Animation
Rotates the element when hovered.
Hover to rotate!
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(20deg);
}
}
.animated-box.hover-rotate {
animation: rotate 0.5s ease;
padding: 20px;
background-color: lightblue;
}
5. `hover` + Gradient Background Animation
Applies a gradient background change on hover.
Hover to change gradient!
@keyframes gradient {
0% {
background: linear-gradient(to right, #43cea2, #185a9d);
}
100% {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
}
.animated-box.hover-gradient {
animation: gradient 0.5s ease;
background: linear-gradient(to right, #43cea2, #185a9d);
padding: 20px;
color: white;
}