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
Rotate In Down Left Animation Effect with CSS
The CSS rotateInDownLeft animation effect creates a smooth rotation entrance animation where an element rotates from a -90 degree angle to its normal position while fading in. The rotation occurs from the bottom-left corner of the element.
Syntax
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0deg);
opacity: 1;
}
}
.element {
animation-name: rotateInDownLeft;
animation-duration: duration;
}
Example
The following example demonstrates the rotate in down left animation effect applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 150px;
height: 150px;
background-color: #3498db;
margin: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: rotateInDownLeft 2s ease-in-out;
}
@keyframes rotateInDownLeft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0deg);
opacity: 1;
}
}
.trigger-animation {
animation: rotateInDownLeft 2s ease-in-out;
}
</style>
</head>
<body>
<div class="animated-box">Animated Box</div>
<button onclick="location.reload()">Replay Animation</button>
</body>
</html>
A blue box with rounded corners appears on the page, rotating from -90 degrees to 0 degrees while fading in from transparent to fully opaque. The rotation pivot point is at the bottom-left corner of the element.
Key Properties
| Property | Value | Description |
|---|---|---|
transform-origin |
left bottom | Sets the rotation pivot point to bottom-left corner |
transform |
rotate(-90deg) to rotate(0deg) | Rotates element from -90 degrees to normal position |
opacity |
0 to 1 | Fades element in during the animation |
Conclusion
The rotateInDownLeft animation creates an engaging entrance effect by combining rotation and opacity transitions. It's particularly effective for drawing attention to elements as they appear on the page.
Updated on: 2026-03-15T11:53:57+05:30
124 Views
Advertisements