1. CSS Transitions
Transitions allow smooth changes between property values. You can control:
transition-durationtransition-delaytransition-timing-function
CSS Example
.transition-box {
width: 100px;
height: 100px;
background: skyblue;
transition: all 0.5s ease-in-out;
}
.transition-box:hover {
width: 150px;
background: coral;
}2. Transform (translate, rotate, scale, skew)
The transform property applies 2D/3D transformations:
translate(x, y)rotate(deg)scale(x, y)skew(x, y)
CSS Example
.transform-box {
width: 100px;
height: 100px;
background: lightgreen;
transition: transform 0.5s;
}
.transform-box:hover {
transform: translate(30px, 20px) rotate(15deg) scale(1.2) skew(5deg, 5deg);
}3. Keyframe Animations (@keyframes)
Define animations with @keyframes to describe how elements change over time.
CSS Example
.animate-box {
width: 80px;
height: 80px;
background: purple;
color: white;
text-align: center;
line-height: 80px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}4. Animation Properties
Animations can be customized with these properties:
animation-iteration-count– how many timesanimation-direction– normal, reverse, alternateanimation-fill-mode– forwards, backwards, both
CSS Example
.anim-props {
width: 100px;
height: 100px;
background: orange;
animation: fadeIn 3s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}