49 lines
705 B
CSS
49 lines
705 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(90deg);
|
|
opacity: 0.3;
|
|
}
|
|
100% {
|
|
transform: rotateY(0deg);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.rotate {
|
|
animation: rotate 0.6s ease-in-out;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
#personImg {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
#personName {
|
|
will-change: opacity, color;
|
|
transition: opacity 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Background transition */
|
|
body {
|
|
will-change: background-image;
|
|
} |