CSS @Keyframes

#css #webdev

Tahukah Kamu?

Dengan menggunakan CSS kita dapat membuat animasi untuk aplikasi website, animasi merupakan konsep untuk merubah style elemen secara bertahap ke set style yang lain.

Di CSS ada rule yang dapat digunakan untuk membuat animasi, yaitu @keyframes. Dengan @keyframes kamu dapat menentukan kapan terjadinya perubahan style.

Mari kita coba membuat animasi perubahan warna background menggunakan @keyframes.

body {
    background-color: yellowgreen;
    animation: henshin 5s infinite;
}

@keyframes henshin {
    0% { background-color: blueviolet; }
    50% { background-color: yellowgreen; }
    100% { background-color: blueviolet; }
}

Penjelasan

Kita membuat sebuah @keyframes dengan nama henshin, @keyframes tersebut dijalankan terus menerus setiap 5 detik, dan pada waktu tertentu dalam 5 detik tersebut akan terjadi perubahan style, dimana pada detik ke 0 (5*0%) background akan berwarna blueviolet -> detik ke 2,5(5*50%) akan berwarna yellowgreen -> dan detik ke 5(5*100%) akan berwarna blueviolet.

Hasilnya

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.