Swing Out Backward Top is a swing out CSS keyframe animation with 3 keyframe steps (0% → 40% → 100%). It animates transform (rotate, translateY, translateZ) and opacity. The element fades out completely, so use the forwards fill mode to keep it hidden afterwards.
Swing Out animations rotate the element around an edge like a door on a hinge while it fades. They work well for panels, cards and flipping interface elements.
Animation shorthand
.element {
animation: swing-out-backward-top 1s ease 0s 1 normal forwards;
}@keyframes code
@keyframes swing-out-backward-top {
0% { transform: rotate(0) translateY(0); opacity: 1; }
40% { transform: rotate(10deg) translateY(-10px); opacity: 1; }
100% { transform: rotate(50deg) translateY(-400px) translateZ(-200px); opacity: 0; }
}HTML
<div class="element">Animated content</div>Keyframe steps
| Step | Styles |
|---|---|
| 0% | transform: rotate(0) translateY(0); opacity: 1; |
| 40% | transform: rotate(10deg) translateY(-10px); opacity: 1; |
| 100% | transform: rotate(50deg) translateY(-400px) translateZ(-200px); opacity: 0; |
Respect reduced motion
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}More Swing Out animations
Frequently Asked Questions
Copy the @keyframes swing-out-backward-top block and the animation shorthand into your stylesheet, then add the class to any element. The shorthand reads name, duration, timing function, delay, iteration count, direction and fill mode.
Yes. Change the second value in the shorthand, for example 2s for a slower animation, or use the settings above the code to try duration, timing, delay, repeat count, direction and fill mode and copy the updated CSS.
The last keyframe sets opacity to 0 and the forwards fill mode keeps that final state. Remove forwards if you want the element to reappear when the animation ends.
Yes. It only animates transform and opacity, which browsers can hand to the GPU, so it stays smooth even on mobile devices.