Animasi dan Transisi CSS

Teknik untuk menambahkan efek gerak dan perubahan halus pada elemen web.

CSS Transitions

Transisi memungkinkan perubahan nilai properti CSS terjadi secara halus selama durasi tertentu.

/* Syntax dasar */
.element {
    transition: property duration timing-function delay;
}

/* Contoh */
.button {
    background: blue;
    transition: background 0.3s ease;
}

.button:hover {
    background: red;
}

Properti Transisi

Properti	Deskripsi
`transition-property`	Properti CSS yang akan ditransisikan (all, none, atau properti spesifik)
`transition-duration`	Durasi transisi dalam detik (s) atau milidetik (ms)
`transition-timing-function`	Fungsi waktu transisi (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier)
`transition-delay`	Penundaan sebelum transisi dimulai

ease

linear

ease-in

ease-out

ease-in-out

CSS Animations

Animasi memungkinkan kontrol lebih kompleks dengan keyframes.

/* Mendefinisikan keyframes */
@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Mengaplikasikan animasi */
.element {
    animation: slideIn 1s ease-out;
}

Properti Animasi

Properti	Deskripsi
`animation-name`	Nama @keyframes yang didefinisikan
`animation-duration`	Durasi satu siklus animasi
`animation-timing-function`	Fungsi waktu animasi
`animation-delay`	Penundaan sebelum animasi dimulai
`animation-iteration-count`	Jumlah pengulangan (number atau infinite)
`animation-direction`	Arah animasi (normal, reverse, alternate, alternate-reverse)
`animation-fill-mode`	Gaya yang diterapkan sebelum/setelah animasi (none, forwards, backwards, both)
`animation-play-state`	Status animasi (running atau paused)

Bounce

Spin

Pulse

Transform

Mengubah bentuk, posisi, dan ukuran elemen:

.element {
    /* 2D Transforms */
    transform: translate(50px, 100px); /* Pindah posisi */
    transform: rotate(45deg); /* Rotasi */
    transform: scale(1.5); /* Perbesar */
    transform: skew(20deg); /* Miring */
    
    /* 3D Transforms */
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotateZ(45deg);
    transform: translate3d(50px, 100px, 20px);
    
    /* Multiple transforms */
    transform: translateX(50px) rotate(45deg) scale(1.2);
}

Translate

Rotate

Scale

Skew

Praktik: Buat Animasi Anda

Coba buat animasi dengan kode berikut:

/* Edit kode ini */
@keyframes customAnimation {
    0% {
        transform: scale(1);
        background: blue;
    }
    50% {
        transform: scale(1.5);
        background: purple;
    }
    100% {
        transform: scale(1);
        background: red;
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background: blue;
    animation: customAnimation 2s infinite;
}