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 Out Up Right Animation Effect with CSS
The CSS rotate out up right animation creates a rotation effect where an element rotates 90 degrees clockwise around its bottom-right corner while fading out, simulating an exit animation.
Syntax
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0deg);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.element {
animation-name: rotateOutUpRight;
animation-duration: duration;
}
Key Properties
| Property | Value | Description |
|---|---|---|
transform-origin |
right bottom | Sets rotation pivot point to bottom-right corner |
transform |
rotate(90deg) | Rotates element 90 degrees clockwise |
opacity |
0 | Fades element to transparent |
Example
The following example demonstrates the rotate out up right animation effect −
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: #ff6b6b;
margin: 50px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
animation: rotateOutUpRight 2s ease-in-out;
}
@keyframes rotateOutUpRight {
0% {
transform-origin: right bottom;
transform: rotate(0deg);
opacity: 1;
}
100% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0;
}
}
.restart-btn {
margin: 20px 50px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">Box</div>
<button class="restart-btn" onclick="location.reload()">Restart Animation</button>
</body>
</html>
A red box rotates 90 degrees clockwise around its bottom-right corner while fading out over 2 seconds. A green "Restart Animation" button allows you to replay the effect.
Conclusion
The rotate out up right animation combines rotation and opacity changes to create a smooth exit effect. The transform-origin property is crucial for controlling the rotation pivot point.
Updated on: 2026-03-15T12:01:10+05:30
74 Views
Advertisements