Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Animate transform property with CSS Animation
The CSS transform property can be animated using CSS animations to create smooth transitions and visual effects. By combining transform functions like rotate(), scale(), translate(), and skew() with keyframes, you can create engaging animations.
Syntax
@keyframes animation-name {
from {
transform: initial-value;
}
to {
transform: final-value;
}
}
selector {
animation: animation-name duration timing-function;
}
Example 1: Rotate Animation
The following example creates a rotation animation using the transform: rotate() property −
<!DOCTYPE html>
<html>
<head>
<style>
.rotate-box {
width: 200px;
height: 200px;
background-color: #ff6b6b;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
font-weight: bold;
animation: rotateAnimation 3s infinite linear;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="rotate-box">
Rotating Box
</div>
</body>
</html>
A red square box with white text continuously rotates 360 degrees clockwise over 3 seconds, repeating infinitely with smooth linear motion.
Example 2: Scale and Move Animation
This example combines multiple transform functions for a more complex animation −
<!DOCTYPE html>
<html>
<head>
<style>
.transform-box {
width: 100px;
height: 100px;
background-color: #4ecdc4;
margin: 100px auto;
animation: complexTransform 4s ease-in-out infinite alternate;
}
@keyframes complexTransform {
0% {
transform: translateX(0) scale(1) rotate(0deg);
background-color: #4ecdc4;
}
50% {
transform: translateX(200px) scale(1.5) rotate(180deg);
background-color: #45b7aa;
}
100% {
transform: translateX(0) scale(0.5) rotate(360deg);
background-color: #95e1d3;
}
}
</style>
</head>
<body>
<div class="transform-box"></div>
</body>
</html>
A teal square moves horizontally while simultaneously changing size, rotating, and shifting color. The animation alternates between forward and reverse directions.
Common Transform Functions
| Function | Description | Example |
|---|---|---|
rotate() |
Rotates element by specified angle | rotate(45deg) |
scale() |
Scales element size | scale(1.5) |
translateX() |
Moves element horizontally | translateX(100px) |
skew() |
Skews element along axes | skew(10deg, 5deg) |
Conclusion
Animating the transform property provides smooth, hardware-accelerated animations that are perfect for creating engaging visual effects. Combine multiple transform functions within keyframes to create complex, professional animations.
Updated on: 2026-03-15T13:37:44+05:30
231 Views
Advertisements