8Transitions, Animations & Transforms
Introduction to CSS Transforms
Transforms let you modify an element's appearance in a 2D or 3D space without affecting the document flow. You can move, scale, rotate, or skew elements for dynamic visual effects.
/* Translate: move element */
div { transform: translate(50px, 100px); }
/* Scale: resize element */
div { transform: scale(1.5); }
/* Rotate: rotate element */
div { transform: rotate(45deg); }
/* Skew: tilt element */
div { transform: skew(20deg, 10deg); }You can also combine multiple transforms: ```css div { transform: translate(50px, 50px) rotate(30deg) scale(1.2); } ```
CSS Transitions
Transitions allow smooth changes between CSS property values over time when triggered by events like hover or focus.
/* Smooth background change on hover */
button {
background-color: #3498db;
transition-property: background-color, transform;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}
button:hover {
background-color: #2ecc71;
transform: scale(1.1);
}Shorthand version: ```css button { transition: all 0.5s ease-in-out; } ```
Keyframes & Animations
Keyframes let you define intermediate steps in an animation sequence, giving you full control over timing and properties.
/* Define keyframes */
@keyframes slideAndFade {
0% { transform: translateX(-100px); opacity: 0; }
50% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
/* Apply animation */
div {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation-name: slideAndFade;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}- animation-name: name of the keyframes
- animation-duration: how long the animation lasts
- animation-iteration-count: number of repetitions
- animation-timing-function: easing of the animation
- animation-fill-mode: determines styles after animation ends
Mini Project Step
Create an interactive card that grows slightly on hover, rotates a little, and changes color smoothly. Then add an infinite animation for an icon inside the card that moves side to side and fades in/out.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transform & Animate Card</title>
<style>
.card {
width: 200px;
height: 150px;
background-color: #3498db;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}
.card:hover {
transform: scale(1.1) rotate(5deg);
background-color: #2ecc71;
}
.icon {
width: 50px;
height: 50px;
background-color: #e74c3c;
animation: bounceFade 2s infinite ease-in-out;
}
@keyframes bounceFade {
0% { transform: translateX(-20px); opacity: 0; }
50% { transform: translateX(0); opacity: 1; }
100% { transform: translateX(20px); opacity: 0; }
}
</style>
</head>
<body>
<div class="card">
<div class="icon"></div>
</div>
</body>
</html>