Agustus 19, 2026
http://kedaigrafikaindonesia.blogspot.com/
#grafika-logo-animation {
width: 100%;
max-width: 360px;
margin: 15px auto;
text-align: center;
position: relative;
overflow: hidden;
padding: 10px 0;
}
#grafika-logo-animation .logo-stage {
position: relative;
width: 100%;
height: 230px;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
#grafika-logo-animation .grafika-logo {
position: absolute;
width: 210px;
height: 210px;
object-fit: contain;
opacity: 0;
transform: scale(0.5) rotate(-180deg);
transition: opacity 1s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
filter: drop-shadow(0 8px 15px rgba(0,0,0,.25));
cursor: pointer;
}
#grafika-logo-animation .grafika-logo.active {
opacity: 1;
transform: scale(1) rotate(0deg);
animation: logoZoomRotate 5s ease-in-out infinite;
}
/* Animasi Zoom In, Zoom Out, dan Berputar selama aktif */
@keyframes logoZoomRotate {
0% {
transform: scale(0.95) rotate(0deg);
}
35% {
transform: scale(1.08) rotate(10deg);
}
70% {
transform: scale(0.92) rotate(-10deg);
}
100% {
transform: scale(0.95) rotate(0deg);
}
}
#grafika-logo-animation .logo-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: 700;
margin-top: 5px;
color: #333;
min-height: 22px;
transition: opacity .4s ease;
}
#grafika-logo-animation .logo-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 7px;
margin-top: 10px;
}
#grafika-logo-animation .logo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #bbb;
transition: all .3s ease;
cursor: pointer;
}
#grafika-logo-animation .logo-dot.active {
width: 24px;
border-radius: 10px;
background: #c62828;
}
@media (max-width:480px) {
#grafika-logo-animation .logo-stage { height: 190px; }
#grafika-logo-animation .grafika-logo { width: 175px; height: 175px; }
#grafika-logo-animation .logo-title { font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
#grafika-logo-animation .grafika-logo,
#grafika-logo-animation .logo-title,
#grafika-logo-animation .logo-dot {
animation: none !important;
transition: none !important;
}
}