Animasi CSS: Pendahuluan & Contoh

Efek animasi paling dasar dalam CSS dapat dicapai melalui properti seperti transform dan transition . Namun, draft kerja CSS Animations Level 1 menyediakan lingkungan yang lebih kompleks dengan memanfaatkan properti animation dan @keyframes untuk mencapai efek animasi abadi. Ini paling baik dipahami melalui contoh definitif.

Menentukan aturan animasi menggunakan @keyframes

Aturan @keyframes digunakan untuk menentukan perilaku animasi yang ingin kita terapkan ke pengenal animasi di tata letak halaman. Pengidentifikasi ditentukan melalui animation-name atau dengan menggunakan animation: name; steno.

 @keyframes change-color { from { background-color: #fff; } to { background-color: #000; } }

Dalam konteks ini, contoh di atas akan mengubah background-color dari putih menjadi hitam selama durasi animasi. from mengacu pada awal (0%) dan mengacu to akhir (100%). Jadi, aturan juga dapat ditulis ulang dengan nilai persentase.

 @keyframes change-color { 0% { background-color: #fff; } 50% { background-color: #f3f3f3; } 100% { background-color: #000; } }

Dengan sendirinya, ini tidak akan melakukan apa pun kecuali kita menentukan elemen yang ingin kita animasikan. Selanjutnya, Anda juga harus menentukan animation-duration karena nilai defaultnya adalah 0.

 .container { width: 100vh; height: 100vh; animation-name: change-color; animation-duration: 5s; /* we can also rewrite this using a shorthand animation: change-color 5s; */ }

Kami kemudian dapat memanggil wadah kami menggunakan div dan hasilnya adalah ini:

Biasanya, sebagian besar animasi CSS yang ditulis dalam CSS murni menggunakan steno karena menghemat penulisan beberapa baris logika animasi. Dengan demikian, berikut adalah referensi untuk nilai properti animation :

 animation-name: name; /* the name of the specific animation (to animate with @keyframes) */ animation-duration: 10s; /* the duration */ animation-timing-function: linear; /* the veolcity curve for the animation */ animation-delay: 1s; /* set a delay for the animation playback */ animation-iteration-count: infinite; /* set it to an infinite loop */ animation-direction: alternate; /* back and forth, use normal for default direction */ animation-fill-mode: both; /* direction to apply the style */ animation-play-state: paused; /* also accepts 'running' */

Bacaan lebih lanjut

Jika Anda ingin mempelajari lebih lanjut tentang animasi CSS secara mendalam, berikut adalah sumber daya yang saya rekomendasikan:

• Referensi CSS Codrops – Ini adalah referensi ekstensif yang ditulis dan diatur oleh Sara Soueidan (@SaraSoueidan) dan berisi contoh mendalam tentang cara kerja properti CSS tertentu.
• MDN CSS Animations – Pengenalan ekstensif gaya dokumentasi untuk animasi CSS di halaman MDN Web Docs.
• Pengantar cubic-bezier() – Artikel mendalam yang ditulis oleh Temani Afif (@ChallengesCss) untuk CSS-Trik tentang penggunaan properti cubic-bezier() untuk membuat animasi CSS tingkat lanjut.

Contoh Animasi CSS

Cara terbaik untuk mempelajari sesuatu adalah melalui contoh. Bagian berikut didedikasikan sepenuhnya untuk berbagai efek yang dicapai melalui properti animasi CSS.

Satu hal terakhir! Banyak contoh animasi di bawah ini memiliki sedikit kode yang terkait dengannya, karena itu, saya telah menambahkan overflow max-height ke artikel ini untuk mengaktifkan scrollbar. Anda juga dapat mengarahkan kursor ke setiap cuplikan kode dan menyalinnya ke papan klip untuk diimpor ke editor kode Anda.

Melambai

Animasi gelombang dibuat dengan terlebih dahulu menggambar jalur SVG untuk pola gelombang dan kemudian menetapkan ID untuk itu. Setelah itu, kami menentukan empat kelas nth-child dengan variabel animation-delay animation-duration . Setiap variabel mewakili gelombang individu di dalam animasi, dan setiap gelombang dapat ditata secara independen.

Keuntungan mendefinisikan pola dengan SVG adalah kode menjadi mudah digunakan kembali.

Jika Anda melihat jalur yang telah kami gambar, kami menentukan empat lapisan berbeda untuk gelombang (menggunakan sumbu khusus) dan kemudian merujuk id #wave-pattern #gelombang yang kami tetapkan untuk jalur awal. Di sinilah Anda juga dapat mengubah tampilan warna setiap gelombang.

 <div class="your-container"> <svg class="css-waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto" > <defs> <path id="wave-pattern" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" ></path> </defs> <g class="animated-waves"> <use href="#wave-pattern" x="48" y="0" fill="rgba(155,255,255,0.7"></use> <use href="#wave-pattern" x="48" y="3" fill="rgba(155,255,255,0.5)"></use> <use href="#wave-pattern" x="48" y="5" fill="rgba(155,255,255,0.3)"></use> <use href="#wave-pattern" x="48" y="7" fill="rgba(155,255,255,0.3)"></use> </g> </svg> </div>

 .css-waves { position: relative; width: 100%; height: 15vh; margin-bottom: -7px; min-height: 100px; max-height: 150px; } /* Here we declare the SVG node that we wish to animate. */ .animated-waves > use { animation: infinite-waves 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; } .animated-waves > use:nth-child(1) { animation-delay: -2s; animation-duration: 7s; } .animated-waves > use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; } .animated-waves > use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; } .animated-waves > use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; } @keyframes infinite-waves { 0% { transform: translate3d(-90px, 0, 0); } 100% { transform: translate3d(85px, 0, 0); } } /* Mobile Optimization */ @media (max-width: 768px) { .css-waves { height: 40px; min-height: 40px; } }

Memuat Teks

Efek pemuatan ini relatif mudah diterapkan karena hanya menggunakan beberapa properti animasi praktis. Pertama, Anda ingin menentukan nilai content: attr() yang kemudian Anda terapkan ke elemen teks yang ingin Anda animasikan. Setelah itu, Anda menentukan animasi itu sendiri, yang dalam kasus kami adalah animation: loading 5s linear infinite; .

Durasi efek pemuatan dapat dimodifikasi dengan mengubah properti 5s. Dan terakhir, kami menggunakan @keyframes untuk memanggil animasi pemuatan dan mengubah lebarnya dari 0% menjadi 100% selama periode 5 detik itu. Semakin tinggi nilai durasi animasi, semakin lambat efek pemuatan.

Kasus penggunaan khusus untuk animasi seperti ini adalah efek transisi untuk pemuatan halaman, tetapi juga solusi yang andal untuk proyek aplikasi saat Anda tidak ingin bergantung pada pustaka apa pun.

 <!-- the loading-text class is specified through the content: attr(); property. change the value name to implement multiple design variations, or reuse the same class to show the loading effect in other parts of your design --> <h2 loading-text="Loading...">Loading...</h1>

 h2 { position: relative; font-size: 5em; color: rgb(199, 255, 110); text-transform: uppercase; border-bottom: 10px solid #ffffff; line-height: initial; } h2::before { content: attr(loading-text); position: absolute; top: 0; left: 0; width: 100%; color: #b0a8e2; overflow: hidden; border-bottom: 10px solid #b0a8e2; animation: loading 5s linear infinite; } @keyframes loading { 0% { width: 0; } 100% { width: 100%; } }

Gelombang Teks

Salah satu hal pertama yang akan Anda perhatikan tentang animasi ini adalah fluiditasnya . Ini dimungkinkan karena kami menggunakan fungsi calc() untuk menghitung setiap transisi secara matematis. Karena kita menulis animasi dalam CSS murni, kita harus menggunakan beberapa elemen span untuk menentukan setiap huruf berurutan dalam animasi.

Adapun untuk memodifikasi kedalaman gelombang, pertama, Anda dapat mengubah durasi dari 3s ke angka yang lebih kecil atau lebih besar. Lebih tinggi berarti efek gelombang akan lebih lambat dan sebaliknya. Dan, di dalam @keyframes Anda dapat mengubah spesifikasi -24px untuk mengubah ketinggian gelombang.

Semakin tinggi nilai negatifnya, semakin jelas efek gelombangnya.

 <div class="blwb"> <span style="--i:1">O</span> <span style="--i:2">C</span> <span style="--i:3">E</span> <span style="--i:4">A</span> <span style="--i:5">N</span> <span style="--i:6">.</span> <span style="--i:7">.</span> <span style="--i:8">.</span> <span style="--i:9">W</span> <span style="--i:10">A</span> <span style="--i:11">V</span> <span style="--i:12">E</span> <span style="--i:13">S</span> <span style="--i:14">.</span> <span style="--i:15">.</span> <span style="--i:16">.</span> </div>

 .text-wave { margin: auto; display: flex; align-items: center; justify-content: center; position: relative; } .text-wave span { position: relative; color: rgb(255, 255, 255); font-size: 40px; font-family: monospace; animation: wave 3s ease-in-out infinite; animation-delay: calc(.1s*var(--i)); } @keyframes wave { 0% { transform: translateY(0px); } 20% { transform: translateY(-24px); } 40%, 100% { transform: translateY(0); } }

Efek Pulsa / Riak

Kita mulai dengan membuat wadah untuk lingkaran yang ingin kita terapkan efeknya. Ini khusus untuk demo tetapi Anda dapat menggunakan kembali kode untuk elemen lain apa pun di halaman Anda. Setelah itu, kita membuat kelas bernama .circle yang akan berfungsi sebagai efek riak animasi.

Dua properti penting yang kami gunakan di kelas ini adalah opacity: 0.5; dan animation: ease-out; . Opacity adalah apa yang menciptakan ilusi memiliki riak/denyut, dan transisi kemudahan membuat riak tersebut keluar dari wadah aslinya.

Selanjutnya, kita mengambil kelas .circle dan menerapkan properti nth-of-type() padanya. Untuk contoh ini, kami menggunakan 3 lingkaran individu yang keluar dari wadah aslinya. Di dalam panggilan tipe ke-n, kami menerapkan animation-delay dengan nilai -0.5s;-1s;-1.5s. Semakin tinggi nilai negatifnya, semakin lama waktu yang dibutuhkan agar efeknya ditampilkan sepenuhnya.

Dan terakhir, kami menerapkan @keyframes ke animasi pulsa yang kami tentukan. Dalam contoh ini, kami menggunakan properti transform: scale() . Ini mendefinisikan ukuran pulsa untuk setiap animasi. Semakin tinggi nilainya, semakin besar riak keluar yang akan muncul.

 <div class="pulse-effect"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div>

 .pulse-effect { background-color: #f6efffa1; height: 100px; width: 100px; border-radius: 100%; position: relative; margin: auto; } .circle { position: absolute; background-color: inherit; height: 100%; width: 100%; border-radius: 100%; opacity: 0.5; animation: pulse 3s ease-out infinite; } .circle:nth-of-type(1) { animation-delay: -0.5s; } .circle:nth-of-type(2) { animation-delay: -1s; } .circle:nth-of-type(3) { animation-delay: -1.5s; } @keyframes pulse { 100% { transform: scale(1.75); opacity: 0; } }

Penghitung (Angka)

Properti penghitung mudah diabaikan karena biasanya Anda menambahkan angka ke elemen tertentu dengan tangan. Namun, ini berguna ketika Anda ingin melakukan tugas bersarang yang mendalam ke item menu atau halaman dokumentasi besar.

Selain itu, Anda dapat mengumpulkan penghitung otomatis untuk judul posting blog. Misalnya Anda sedang menulis review pada beberapa alat. Dan, yang terbaik dari semuanya, penghitung dapat ditata secara individual memberi Anda lebih banyak kebebasan desain.

Namun, untuk demo ini – kami berfokus pada penggunaan properti counter untuk membuat efek penghitung otomatis. Jadi, mari kita gali dan pahami cara kerjanya. Untuk contoh ini, pertama kita buat container yang akan berisi animasi counter. Anda dapat menyesuaikan ini sesuka Anda. Selanjutnya, kita membuat kelas .count-numbers yang menyertakan sintaks animasi, dalam hal ini adalah animation: count-numbers 10s linear infinite forwards; .

Untuk memecahnya, kami menentukan nama untuk animasi kami, kami mengatur durasi menjadi 10 detik, dan kami mengatur arah animasi ke normal karena kami tidak ingin menghitung mundur dari 10. Meskipun, Anda dapat mengaturnya ke alternatif jika Anda ingin penghitung Anda menghitung mundur juga.

Selanjutnya, kita tentukan kelas baru yang disebut .count-numbers::sebelumnya kita gunakan untuk menamai counter kita, dalam hal ini, content: counter(count); . Ini penting karena langkah selanjutnya adalah menggunakan counter-name untuk menganimasikan efek melalui @keyframes .

Langkah terakhir adalah menulis spesifikasi untuk animasi yang akan dirender. Dalam demo kami, kami menghitung dari 1 hingga 10, jadi kami menentukan nilai @keyframes kami dari 0% hingga 100% dalam peningkatan 10%. Setiap increment berisi pernyataan counter-increment yang juga menggunakan counter-name: counter-increment: count 0; .

Jadi, pada 0% kenaikan kami diatur ke 0 dan pada 10% diatur ke 1 untuk memproyeksikan efek penghitung.

Juga, coba ubah content: counter(count); spesifikasi konten: counter(count, upper-roman); dan lihat apa yang terjadi!

 <main class="counter-container"> <div class="counter-card count-numbers"></div> </main>

 .counter-container { display: grid; grid-gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: auto; max-width: 100%; padding: 2rem; } .counter-card { align-items: center; border-radius: 10px; display: flex; height: 15rem; justify-content: center; position: relative; width: 100%; } .count-numbers { animation: count-numbers 10s linear infinite forwards; background-color: #f3f3f3; counter-reset: count 0; } .count-numbers::before { color: #000; content: counter(count); font-size: 5rem; } @keyframes count-numbers { 0% { counter-increment: count 0; } 10% { counter-increment: count 1; } 20% { counter-increment: count 2; } 30% { counter-increment: count 3; } 40% { counter-increment: count 4; } 50% { counter-increment: count 5; } 60% { counter-increment: count 6; } 70% { counter-increment: count 7; } 80% { counter-increment: count 8; } 90% { counter-increment: count 9; } 100% { counter-increment: count 10; } }

Bola Memantul

Kita mulai dengan membuat container untuk bola kita terlebih dahulu, dalam hal ini adalah .ball-container .

Selanjutnya, kita tentukan ukuran bola dan gaya penampilannya menggunakan kombinasi warna latar belakang dan efek bayangan. Dalam demo kami, kami telah menggunakan efek yang lebih bersinar, tetapi Anda dapat memodifikasinya sesuai kebutuhan Anda sendiri. Dan akhirnya, kami menentukan animasi, dalam hal ini, kami menetapkan durasi ke 5s dan juga menerapkan ease-in-out yang berarti transisi memiliki awal dan akhir yang lambat.

Setelah bola ditarik dan animasi diatur, kita dapat menulis aturan @keyframes kita. Untuk mencapai efek memantul, kami menggunakan transform: translatey(); dalam kelipatan 50%, jadi 0% hingga 50% hingga 100%. Penekanannya adalah pada 50% karena di sini kita mengatur ketinggian pantulan dengan menentukan transform: translatey(-50px); – bouncing/float akan setinggi 50px (relatif terhadap wadah). Semakin tinggi angka negatif, semakin tinggi bola akan memantul.

Demikian juga, menentukan angka yang lebih kecil akan mengurangi ukuran pantulan.

Bagian terakhir adalah menambahkan bayangan, meskipun Anda dapat menghapus ini juga karena tidak akan berpengaruh pada animasi bola itu sendiri. Satu-satunya perbedaan dengan bayangan adalah bahwa kita menggunakan properti transform: scale() untuk mengubah ukuran bayangan dalam konteks 2D. Kami menetapkan nilai sesuai dengan skala efek yang ingin kami capai.

 <div class="ball-container"></div> <div class="ball-shadow"></div>

 .ball-container { margin: auto; animation: floating 5s ease-in-out infinite; height: 100px; width: 100px; border-radius: 50%; position: relative; background: radial-gradient(circle at 75% 30%, rgb(107, 6, 6) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #d3f8c8, inset 88px 0px 60px #b4c3dd, inset -20px -60px 100px #5b43e7, inset 0 50px 140px #6bdf7e, 0 0 90px #fff; } @keyframes floating { 0% { transform: translatey(0px); } 50% { transform: translatey(-50px); } 100% { transform: translatey(0px); } } .ball-shadow { width: 95px; height: 30px; top: 50%; animation: expanding 5s infinite; position: relative; border-radius: 50%; margin: auto; background: radial-gradient(circle at 75% 30%, rgb(221 215 243) 5px, rgb(36, 187, 187) 8%, rgb(228, 26, 26) 60%, rgb(173, 221, 221) 100%); box-shadow: inset 0 0 20px #fff, inset 10px 0 46px #3f51b500, inset 88px 0px 60px #ffffff99, inset -20px -60px 100px #5b43e791, inset 0 50px 140px #ffffff, 0 0 90px #39316b; } @keyframes expanding { 0%, 100% { transform: scale(0.5); } 50% { transform: scale(0.75); } }

Flip Koin

Yang saya sukai dari animasi ini adalah kita dapat mengatur radius rotasi yang sangat presisi untuk mencapai efek yang terasa seperti koin benar-benar terbalik. Jadi, untuk memulai, Anda memerlukan 2 gambar (saya menggunakan SVG untuk demo ini, tetapi foto normal berfungsi dengan baik. Pastikan untuk menerapkan kelas yang benar untuk setiap gambar.) dan atur ke opacity: 0; . Kami menyetelnya ke 0 karena nanti, kami menggunakan @keyframes untuk mengubah opacity-nya sehingga gambar terlihat pada posisi tertentu selama animasi.

Kelas .image-container digunakan untuk menentukan dimensi gambar di dalam koin. Pastikan Anda juga menentukan ini untuk gambar sebenarnya, seperti yang ditunjukkan dalam cuplikan di bawah. Selanjutnya, kita tentukan .coin-style yang merupakan bagian luar (koin itu sendiri). Secara teknis, Anda dapat mengatur ini menjadi transparan tetapi demi demo, kami membuatnya terlihat.

Konsep utama untuk kelas .coin-style adalah cara kita menambahkan animasi, yang dalam hal ini adalah: animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) alternatif tak terbatas; .

Yang menarik adalah spesifikasi cubic-bezier() , yang memberi kita efek kurva berputar untuk wadah koin. Ini praktis tidak mungkin untuk ditulis sendiri, jadi rekomendasi saya adalah menggunakan alat generator apa pun untuk membuat efek kurva yang diinginkan.

Dan terakhir, di dalam @keyframes , kita menerapkan fungsi scaleX() untuk mengubah ukuran tampilan koin berdasarkan x-axis . Bahkan perubahan paling minimal pada nilai yang diberikan (dalam demo ini) akan mengubah bagaimana efek “flip” muncul.

Saya pikir implementasi di bawah ini sedekat mungkin dengan sempurna, tetapi mungkin Anda bisa melakukan yang lebih baik!

 <div class="coin-style"> <div class="image-container"> <svg class="firstimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M11.69,2a.47.47,0,0,0-.54.11l-5,5A.47.47,0,0,0,6,7.69.5.5,0,0,0,6.5,8h3A2.5,2.5,0,0,0,12,5.5v-3A.5.5,0,0,0,11.69,2Z" /> <path class="cls-3" d="M22.5,11a.5.5,0,0,0-.5.5v4.94l-.51-2.06a.52.52,0,0,0-1,0L20,16.44V11.5a.5.5,0,0,0-1,0v9a.51.51,0,0,0,.44.5.5.5,0,0,0,.55-.38l1-4.06,1,4.06a.5.5,0,0,0,.49.38h.06a.51.51,0,0,0,.44-.5v-9A.5.5,0,0,0,22.5,11Z" /> <path class="cls-3" d="M11.5,11h-2a.5.5,0,0,0-.5.5v9a.5.5,0,0,0,1,0V17h1.11l.9,3.62a.51.51,0,0,0,.49.38h.12a.51.51,0,0,0,.37-.61l-.88-3.51A1.51,1.51,0,0,0,13,15.5v-3A1.5,1.5,0,0,0,11.5,11Zm.5,4.5a.5.5,0,0,1-.5.5H10V12h1.5a.5.5,0,0,1,.5.5Z" /> <path class="cls-3" d="M16,11a.5.5,0,0,0-.49.42l-1.5,9a.49.49,0,0,0,.41.57.5.5,0,0,0,.57-.41L15.26,19h1.48L17,20.58a.49.49,0,0,0,.49.42h.08a.49.49,0,0,0,.41-.57l-1.5-9A.5.5,0,0,0,16,11Zm-.58,7L16,14.54,16.58,18Z" /> </svg> <svg class="secondimage" width="88" height="88" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"> <defs> <style> .cls-1 { fill: #a08383; } .cls-2 { fill: #e1ebe9; } .cls-3 { fill: #770ba1; } .cls-4 { fill: #0a5097; } </style> </defs> <path class="cls-1" d="M23.5,2h-12a.47.47,0,0,0-.35.15l-5,5A.47.47,0,0,0,6,7.5v20A2.5,2.5,0,0,0,8.5,30h15A2.5,2.5,0,0,0,26,27.5V4.5A2.5,2.5,0,0,0,23.5,2Z" /> <path class="cls-2" d="M15,2h7a1,1,0,0,1,0,2H15a1,1,0,0,1,0-2Z" /> <path class="cls-2" d="M6,13.5v-2a1,1,0,0,1,2,0v2a1,1,0,0,1-2,0Z" /> <path class="cls-2" d="M6,24.5v-8a1,1,0,0,1,2,0v8a1,1,0,0,1-2,0Z" /> <path class="cls-4" d="M21.5,15.5h-1A.5.5,0,0,1,20,15V12.5a.5.5,0,0,1,.5-.5h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,19,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,23,19.5V17A1.5,1.5,0,0,0,21.5,15.5Z" /> <path class="cls-4" d="M15.5,12h2a.5.5,0,0,0,0-1h-2A1.5,1.5,0,0,0,14,12.5V15a1.5,1.5,0,0,0,1.5,1.5h1a.5.5,0,0,1,.5.5v2.5a.5.5,0,0,1-.5.5h-2a.5.5,0,0,0,0,1h2A1.5,1.5,0,0,0,18,19.5V17a1.5,1.5,0,0,0-1.5-1.5h-1A.5.5,0,0,1,15,15V12.5A.5.5,0,0,1,15.5,12Z" /> <path class="cls-4" d="M11,12a1,1,0,0,1,1,1,.5.5,0,0,0,1,0,2,2,0,0,0-4,0v6a2,2,0,0,0,4,0,.5.5,0,0,0-1,0,1,1,0,0,1-2,0V13A1,1,0,0,1,11,12Z" /> </svg> </div> </div>

 svg { color: #151516; position: absolute; } svg.firstimage { opacity: 0; animation: logo-flip 2.5s linear infinite alternate; } svg.secondimage { opacity: 0; animation: logo-flip 2.5s linear 2.5s infinite alternate; } .image-container { position: relative; height: 88px; width: 88px; } .coin-style { background: rgb(233, 226, 226); width: 136px; height: 136px; border-radius: 100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; box-shadow: 0px 15px 15px -19px rgb(255, 255, 255); animation: coin-flip 1.25s cubic-bezier(0.93, 0.05, 0.9, 0.71) infinite alternate; } @keyframes coin-flip { 0% { transform: scaleX(0.95); } 100% { transform: scaleX(0.08); border-radius: 50%; } } @keyframes logo-flip { 0% { opacity: 0; } 50% { opacity: 0; } 53% { opacity: 1; } 100% { opacity: 1; } }

Slide-In

Untuk membuat animasi ini berfungsi, kami menggunakan animation: ease-out; fungsi dalam kombinasi dengan nilai posisi negatif di dalam @keyframes . Jadi, dalam contoh ini kita tentukan 0% {opacity: 0;left: -700px;} yang membuat elemen slide-in kita tidak terlihat di awal, tetapi juga memposisikan 700px di luar container.

Setelah itu, kita tentukan 100% {opacity: 1;left: 0;} yang pada saat animasi kita selesai (kita menyetelnya ke 2 detik) akan mengembalikan visibilitas normal, dan memposisikan elemen kita kembali ke posisi relatifnya.

Hal yang menarik untuk diperhatikan adalah efek ini bekerja ke segala arah.

Jika Anda ingin mengubah efek slide-in agar muncul dari sisi kanan, Anda perlu mengubah kiri:; nilai ke kanan :; dan sebaliknya untuk posisi seperti atas dan bawah. Anda juga dapat menunda animasi dengan menyesuaikan berapa lama waktu yang dibutuhkan elemen untuk meluncur.

Nilai yang lebih tinggi akan memperlambat animasi.

 <h2 id="slide-in" class="animation"> Slide-In Animation </h2>

 .animation { position: relative; animation: animation 2s ease-out; } #slide-in { text-align: center; color: #fff; } @keyframes animation { 0% { opacity: 0; left: -700px; } 100% { opacity: 1; left: 0; } }

Efek Gumpalan

Pertama-tama, apa sih Blob itu? Seperti yang dikatakan Ian Latchmansingh, “Blob adalah bentuk pseudo-organik amorf yang biasanya digunakan untuk menambatkan halaman arahan secara visual. Biasanya berfungsi sebagai topeng atau latar belakang untuk sebuah ilustrasi. Sekitar 90% dari waktu Blob diisi dengan gradien dan berada di lapisan terendah dari sebuah desain.” . Ini tentu saja merupakan salah satu pola yang lebih umum dalam desain web modern. Tapi, bagaimana kita menghidupkannya?

Kami mulai dengan membuat wadah efek gumpalan dan juga menentukan 3 elemen rentang individu di dalam wadah. Kami melakukan ini karena kami sebenarnya "menggambar" gumpalan itu sendiri menggunakan kombinasi properti border dan border-radius.

Untuk mencapai efek yang bervariasi, kami menggunakan nth-child untuk menata setiap elemen secara individual. Jika Anda ingin menjadi funky dengannya, jangan ragu untuk mengubah properti persentase untuk menyesuaikan tampilan gumpalan.

Animasi itu sendiri dicapai dengan menggunakan properti transform: rotate() di dalam spesifikasi @keyframes . Kami mengaturnya ke 0 hingga 360 derajat karena ini memberi kami efek abadi. Overlay warna dilakukan melalui :hover dan memungkinkan kita mengatur warna latar belakang kustom. Dan, selain itu, kami juga membuat wadah terpisah di dalam blob itu sendiri. Ini memberi Anda kemampuan untuk menata bagian individual dari tata letak halaman Anda untuk memiliki efek animasi khusus ini.

 <div class="blob-effect"> <span></span> <span></span> <span></span> <div class="div-container"> <a href="#">Hover</a> </div> </div>

 .blob-effect { position: relative; width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; } .blob-effect span:nth-child(1) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 5s linear infinite; } .blob-effect:hover span:nth-child(1) { background: #d76bb1; border: none; } .blob-effect span:nth-child(2) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob 4s linear infinite; } .blob-effect:hover span:nth-child(2) { background: #f192d0; border: none; } .blob-effect span:nth-child(3) { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 2px solid #a9ff68; border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; transition: 0.5s; animation: rotate-blob2 10s linear infinite; } .blob-effect:hover span:nth-child(3) { background: #f06ec294; border: none; } @keyframes rotate-blob { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-blob2 { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } .div-container { position: relative; padding: 40px 60px; color: #fff; text-align: center; transition: 0.5s; z-index: 10000; } .div-container p { color: #fff; } .div-container a { position: relative; display: inline-block; margin-top: 10px; border: 2px solid #fff; padding: 6px 18px; text-decoration: none; color: #fff; font-weight: 600; border-radius: 73% 27% 44% 56% / 49% 44% 56% 51%; } .div-container a:hover { background: #fff; color: #333; }

Beralih Teks

Efek animasi biasanya disediakan untuk desain web kreatif. Dan dalam hal ini, efek alih teks ini akan membantu menciptakan kesan pertama yang kuat bagi pengunjung situs Anda. Ideal untuk pengenalan header, atau jika disesuaikan – dapat digunakan untuk menampilkan fitur produk, dll.

Hal pertama yang kita lakukan adalah membuat wadah untuk efek yang sebenarnya. Setelah itu, kita tentukan kelas div baru yang akan berisi logika animasi. Dalam kasus kami, kami menggunakan panjang animasi 8 detik, dikombinasikan dengan 3 spesifikasi animation-delay terpisah.

Penundaan digunakan untuk menentukan kapan kata tertentu akan muncul setelah kita menambahkan logika @keyframes kita.

 <div class="g-container"> <div class="word">Text</div> <div class="word">Switch</div> <div class="word">Animation</div> </div>

 .g-container { position: relative; font-family: monospace; color: rgb(255, 255, 255); font-size: 4em; filter: contrast(15); } .word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: switch 8s infinite ease-in-out; min-width: 100%; margin: auto; } .word:nth-child(1) { animation-delay: -7s; } .word:nth-child(2) { animation-delay: -6s; } .word:nth-child(3) { animation-delay: -5s; } @keyframes switch { 0%, 5%, 100% { filter: blur(0px); opacity: 1; } 50%, 80% { filter: blur(180px); opacity: 0; } }

Arahkan Sorotan

Harus diakui, efek khusus ini tidak menggunakan properti animasi konkret. Namun, penggunaan fungsi attr() dan var() harus cukup menginspirasi untuk mencoba dan menyesuaikan lebih lanjut efek ini.

Jika Anda melihat spesifikasi ul li a::before – kita menggunakan attr() untuk menentukan elemen mana yang ingin kita atribusikan efeknya. Selain itu, kami menambahkan variabel bernama –clr yang Anda gunakan untuk mengatur warna khusus untuk setiap item yang ingin Anda terapkan efek hover.

Untuk contoh ini, kami juga telah menambahkan properti border-right untuk menunjukkan warna mana yang kami gunakan untuk setiap elemen. Anda dapat menghapusnya dan efeknya akan tetap bekerja.

 <ul> <li style="--clr:#a4e935"> <a href="#" hover-text=" Hover"> Hover </a> </li> <li style="--clr:#61cbb7"> <a href="#" hover-text=" Highlight"> Highlight </a> </li> </ul>

 ul { position: relative; display: flex; flex-direction: inherit; gap: 25px; } ul li { position: relative; list-style: none; } ul li a { font-size: 2em; font-family: monospace; text-decoration: none !important; letter-spacing: 0px; line-height: 1em; color: rgb(255, 255, 255); } ul li a::before { content: attr(hover-text); position: absolute; color: var(--clr); width: 0; overflow: hidden; transition: 1s; border-right: 8px solid var(--clr); -webkit-text-stroke: 1px var(--clr); } ul li a:hover::before { width: 100%; filter: drop-shadow(0 0 25px var(--clr)) }