animasi CSS

Ada banyak program di mana Anda dapat mengedit, membuat montase, atau bahkan membuat animasi, setiap kali ada banyak perangkat lunak yang menambahkan proyek interaktif jenis ini. Pada postingan kali ini kami tidak hanya akan memperkenalkan anda pada dunia animasi, tetapi kami juga akan memperkenalkan anda kepada teman baru.

Seperti yang Anda ketahui, dunia komputasi penuh dengan perintah dan alat yang berguna untuk pengembangan halaman web atau media online, yang saat ini hidup berdampingan. Tetap bersama kami dan temukan dalam tutorial baru ini cara lain untuk meningkatkan level Anda dengan komputasi dan interaktivitas.

Apa itu animasi?

Kami ingin Anda sepenuhnya memasuki tutorial, tetapi untuk ini, Anda perlu memasuki dunia animasi atau apa yang terkait dengan desain grafis, dunia desain interaktif. 

Animasi juga merupakan bagian dari dunia audiovisual, sebenarnya tidak ada artinya jika atau tidak karena di dalamnya diperkenalkan audio dan gambar bergerak. Untuk alasan ini, ketika kita berbicara tentang «animasi», kita mengacu pada apa yang secara populer dikenal sebagai «kartun».

Seperti yang telah dirangkum di atas, animasi muncul dari kemampuan untuk memberikan gerakan pada sesuatu, dalam hal ini kartun. Tetapi bagaimana semua gerakan ini dicapai? Tidak diragukan lagi, mereka muncul dari apa yang kita sebut, urutan gambar atau foto bahwa dengan diperintahkan secara berurutan, satu demi satu, mereka berhasil menghasilkan gerakan yang kredibel di depan mata kita, yang meminjamkan diri dan memasuki permainan ilusi visual.

Dahulu, animasi pertama dirancang pada lembaran kertas, di masing-masingnya, karakter animasi digambar mengambil langkah-langkah, dan begitu ujung lembaran tercapai, itu dilewatkan satu per satu dengan cepat untuk mencapai efek gerakan di menggambar.

Jenis animasi

Ada beberapa jenis animasi:

Kartun atau Animasi Tradisional

Gaya ini terdiri dari memberikan gerakan kepada protagonis frame demi frame. Pada mulanya, ketika sarana audiovisual tidak mencukupi, dilakukan melalui penggambaran dan pengecatan setiap frame (termasuk latar belakang, panggung atau latar animasi), untuk kemudian difilmkan pada apa yang kita kenal sebagai pita film.

Hentikan gerakan

Stop Motion adalah teknik animasi yang tidak ada hubungannya dengan kartun. Selain itu, tujuan utamanya adalah untuk mensimulasikan gerakan objek yang pada kenyataannya benar-benar statis dan dibagi menjadi dua fase: animasi tanah liat atau gerakan tanah liat dan animasi objek kaku.

Pikselasi

Pixelation adalah teknik yang berasal dari Stop Motion dan terdiri dari bekerja dengan objek yang bukan boneka atau model, tetapi objek umum atau orang. Objek difoto beberapa kali dan sedikit bergeser dengan setiap bingkai.

Rotoskopi

Ini terdiri dari menggambar langsung dari gambar lain, seperti menjiplak gambar pada gambar lain atau orang yang nyata. Ini dianggap sebagai pendahulu mocap, yaitu penangkapan gerak yang digunakan untuk membuat ulang karakter digital di dunia perfilman.

Animasi dengan Potongan atau Potongan Animasi

Ini adalah teknik yang terdiri dari pemotongan angka, angka-angka ini dapat direpresentasikan di atas kertas atau di foto. Tubuh karakter dibangun berdasarkan potongan dan gerakan dan animasi muncul dari penggantian potongan tersebut.

animasi 3d

Animasi 3D berasal dari program editor, yang memungkinkan simulasi dan animasi dilakukan. Dalam dua varian ini, pencahayaan yang baik, pergerakan kamera, dan efek khusus bersentuhan.

Saat ini juga ada teknik lain seperti: lukisan di kaca, animasi pasir, layar guja dan lukisan di seluloid. 

Apa itu CSS?

Sekarang setelah Anda mengetahui sedikit lebih banyak tentang dunia animasi, saatnya bagi kami untuk memperkenalkan Anda ke dunia akronim CSS.

Akronim CSS, lihat "lembar gaya berjenjang". Itu dibentuk oleh bahasa yang digunakan di sektor desain dan dalam penyajian halaman web, bahkan lebih baik lagi, mereka adalah serangkaian alat dan perintah yang bertugas menyajikan halaman web seperti yang kita lihat pertama kali. itu sudah dibuat. Bekerja sama dengan alat HTML (diatur dari konten dasar halaman).

Namanya ditentukan oleh jumlah lembar yang dikandungnya dan salah satunya mewarisi sifat atau karakteristik dari yang lain. Artinya, Anda dapat bekerja dengan template blog sederhana, tetapi ketika Anda ingin menyesuaikan tampilan situs, Anda perlu menerapkan CSS yang bersama-sama dengan CMS yang baik akan membantu Anda meningkatkan jangkauan konten Anda.

Untuk apa CSS-nya?

Dengan CSS, Anda dapat mengatur halaman Anda, yaitu, Anda dapat memberi tahu halaman web Anda bagaimana Anda ingin menempatkan semua informasi sehingga pemirsa mudah ditangani dan berguna pada saat yang bersamaan. Di sini masukkan semua perintah dari beberapa elemen yang merupakan bagian dari gaya atau desain halaman web, misalnya: font, warna, ukuran dll. 

Biasanya, agar Anda lebih memahami tentang apa alat ini, spesialis pemasaran digital adalah yang pertama memahami hal ini karena merekalah yang menanganinya.

Animasikan dalam CSS

Nah, sekarang Anda sudah tahu sedikit tentang dunia animasi dan CSS. Saatnya memulai tutorial.

Animasi CSS memungkinkan Anda untuk menganimasikan transisi antara satu gaya CSS dan lainnya. Animasi ini terdiri dari dua komponen: a gaya yang menjelaskan animasi CSS dan satu set bingkai yang menunjukkan keadaan awal dan akhir, serta kemungkinan titik perantara di dalamnya.

Masing-masing animasi ini memiliki serangkaian keunggulan:

• Penggunaannya sangat mudah untuk animasi sederhana, Anda dapat melakukannya bahkan tanpa memiliki pengetahuan tentang Javascript.
• Animasi ditampilkan dengan benar, bahkan pada komputer berdaya rendah.
• Dikendalikan oleh browser, memungkinkan mengoptimalkan kinerja dan efisiensi, sehingga mengurangi frekuensi dan mengeksekusi tab sedemikian rupa sehingga tidak terlihat.

Pengaturan animasi

Untuk memulai animasi, pertama-tama kita harus mengkonfigurasinya. Untuk melakukan ini, kita akan pergi ke properti animasi dan untuk sub - propertinya. Alat ini akan memungkinkan kita untuk mengonfigurasi ritme dan durasi animasi dan bahkan urutannya.

Sub-properti tersebut adalah:

animasi - penundaan

Waktu tunda antara saat elemen dimuat dan awal urutan animasi.

animasi - arah

Menunjukkan apakah animasi harus kembali ke bingkai awal di akhir urutan atau harus dimulai dari awal saat mencapai akhir.

animasi - durasi

Menunjukkan jumlah waktu yang dibutuhkan animasi untuk menyelesaikan siklusnya (durasi)

animasi - iterasi - hitung

Berapa kali itu diulang. Kami dapat menunjukkan tak terbatas untuk mengulang animasi tanpa batas.

animasi - nama

Ini digunakan untuk menentukan nama yang menjelaskan setiap frame animasi.

animasi - mainkan - status

Memungkinkan Anda untuk dapat menjeda dan melanjutkan urutan animasi.

animasi - waktu- fungsi

Ini menunjukkan ritme animasi, yaitu, bagaimana bingkai animasi ditampilkan, untuk ini, kurva akselerasi dibuat.

animasi - isi - mode

Menentukan nilai apa yang akan dimiliki properti setelah animasi berakhir.

Atur urutan dengan bingkai

Setelah kami mengonfigurasi waktu, nomenklatur, dll. Saatnya untuk menawarkan tampilan atau nuansa animasi kita.

Untuk melakukan ini, kami akan membuat dua bingkai baru dan menggunakan aturan @kartun. Dengan ini, setiap frame menjelaskan bagaimana setiap elemen ditemukan selama urutan animasi.

Untuk menunjukkan waktu dan ritme, bingkai menggunakan persentase dan dari dan keBerkat ini, kami dapat menunjukkan kapan awal terjadi dengan 0% dan akhir dengan 100%.

Bingkai dan animasi teks

Untuk menambahkan lebih banyak bingkai dan menganimasikannya dengan teks, Anda perlu menerapkan ukuran font tajuk yang lebih besar sehingga tajuk bertambah saat bergerak selama waktu tertentu, dan kemudian mengecil ke ukuran aslinya setelahnya. Untuk ini kita akan membuat kode berikut:

75% font - ukuran: 300%; margin - kiri: 25%; lebar: 150%;

Dengan kode ini, kami menyarankan kepada browser bahwa dalam 75% dari urutan, header memiliki margin kiri 25% dan ukuran 200% dengan lebar 150%.

Pengulangan animasi

Untuk membuat pengulangan animasi, perlu menggunakan properti berikut: animasi - iterasi - hitung dan kita harus menunjukkan berapa kali kita ingin mengulanginya. Kami juga dapat menggunakan tak terbatas sehingga selalu berulang.

Kesimpulan

Seperti yang Anda lihat, di CSS Anda dapat membuat proyek animasi dan Anda dapat memasukkannya dengan mengikuti langkah-langkah yang telah kami berikan kepada Anda. Jika Anda terus bertanya dan menginformasikan diri Anda sendiri, Anda akan menemukan bahwa ada banyak pilihan yang tersedia bagi kami.

Apakah Anda sudah berani?