Transisi & Animasi

by oktaviardi pratama

HTML

<h1>CSS Motion Demo</h1>

    <div class="container">

        <!-- Demo 1: Animation Otomatis -->
        <div>
            <h2>1. Keyframe Animation</h2>
            <p>Bola bergerak otomatis, berubah warna & bentuk.</p>
            <div class="track">
                <div class="moving-box"></div>
            </div>
        </div>

        <!-- Demo 2: Transition Interaktif -->
        <div>
            <h2>2. Transition Hover</h2>
            <p>Arahkan mouse ke kartu untuk efek halus.</p>
            <div class="card">
                <div class="icon">🚀</div>
                <h3>Luncur!</h3>
                <p>Hover saya untuk melihat efek transisi CSS yang halus dan membal.</p>
            </div>
        </div>

    </div>

CSS

body {
            font-family: sans-serif;
            background: #f0f2f5;
            padding: 40px;
            text-align: center;
        }

        h2 { margin-bottom: 20px; color: #333; }
        .container { display: flex; justify-content: center; gap: 50px; flex-wrap: wrap; }

        /* --- BAGIAN 1: ANIMATION (Box Bergerak) --- */
        .track {
            width: 300px;
            height: 60px;
            background: #dfe6e9;
            border-radius: 30px;
            position: relative;
            overflow: hidden;
            border: 2px solid #b2bec3;
            margin-top: 20px;
        }

        .moving-box {
            width: 50px;
            height: 50px;
            background: #e74c3c;
            border-radius: 50%;
            position: absolute;
            top: 3px;
            left: 3px;

            /* MENERAPKAN ANIMASI */
            /* Nama | Durasi | Kecepatan | Ulang Selamanya | Bolak-balik */
            animation: slideAcross 2s ease-in-out infinite alternate;
        }

        /* Definisi Keyframes */
        @keyframes slideAcross {
            0% {
                transform: translateX(0);
                background: #e74c3c; /* Merah */
            }
            50% {
                background: #f39c12; /* Oranye di tengah */
            }
            100% {
                transform: translateX(240px); /* Geser ke kanan (lebar track - lebar box) */
                background: #2ecc71; /* Hijau di ujung */
                border-radius: 10px; /* Berubah jadi kotak di ujung */
            }
        }

        /* --- BAGIAN 2: TRANSITION (Card Hover) --- */
        .card {
            width: 200px;
            height: 250px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items:...