35 lines
591 B
CSS
35 lines
591 B
CSS
@keyframes pop {
|
|
0% {
|
|
transform: scale(0.9);
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.status-box {
|
|
animation: pop 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: rotateY(180deg); /* Half flip */
|
|
opacity: 0; /* Make the front disappear */
|
|
}
|
|
100% {
|
|
transform: rotateY(360deg); /* Complete flip */
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotate {
|
|
animation: rotate 0.6s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
backface-visibility: hidden; /* Hide the back during flip */
|
|
} |