Bagaimana Kartun Klasik Menginspirasi CSS Modern – Beragampengetahuan

Produsen browser tidak butuh waktu lama untuk menambahkan fungsionalitas gerak ke CSS. Sederhana :hover Level semu adalah yang pertama, lalu transitionAntara kedua negara. Maka kemampuan untuk mengubah keadaan muncul @keyframes Dan, baru-baru ini, bingkai kunci terkait dengan animasi gulir dari posisi gulir.

Bahkan dengan fitur -fitur tambahan ini, Animasi CSS masih relatif mendasar. Mereka mengingatkan saya pada serial animasi Hanna-Barbera yang saya tumbuh di TV.

Celana pendek animasi ini tidak memiliki anggaran untuk film live-action atau film animasi. Ketika William Hanna dan Joseph Barbera membuat celana pendek Tom dan Jerry saat bekerja di Kartun MGM, mereka juga jauh lebih rendah daripada yang tersedia. Ini berarti bahwa animator perlu mengembangkan teknologi untuk mengatasi keterbatasan biaya dan keterbatasan teknis pada saat itu.

Mereka menggunakan lebih sedikit bingkai per detik dan lebih sedikit sel. Alih -alih menggunakan gambar yang berbeda untuk setiap bingkai, mereka mengulanginya beberapa kali. Mereka membangun adegan baru dengan menyusut dan menimpa elemen lain, menggunakan kembali sel sesering mungkin. Mereka menjaga tubuh mereka sebagai mata, mulut, dan kaki yang statis dan tertutup untuk menciptakan fantasi berbicara dan berjalan. Alih -alih merendahkan kualitas komik ini, kendala ini menciptakan pesona yang seringkali tidak memiliki anggaran terbaru, lebih besar dan pekerjaan yang maju secara teknologi.

Teknik sederhana dan efektif yang dikembangkan oleh animator Hanna-Barbera dapat diimplementasikan menggunakan CSS. Alat tata letak modern memungkinkan pengembang web untuk melapisi elemen. Extensible Vector Graphics (SVG) dapat berisi beberapa frame, dan pengembang tidak perlu menggunakan JavaScript. Mereka dapat mengubah elemen menggunakan CSS opacity,,,,, positionDan visibility. Tapi apa alasannya?

Animasi ini menghidupkan pengalaman statis. Mereka bisa Meningkatkan kegunaan Dengan membimbing tindakan orang, buat mereka bahagia atau terkejut ketika berinteraksi dengan desain. Ketika dipikirkan dengan cermat, animasi dapat meningkatkan branding dan membantu menceritakan kisah tentang merek.

Pengantar Mike Worth

Saya telah berada di situs web baru akhir-akhir ini untuk komposer pemenang penghargaan Emmy Mike Worth. Dia mempekerjakan saya untuk membuat desain bergaya retro yang berani untuk memamerkan karyanya. Saya telah menggunakan animasi CSS untuk membuat pendengar senang dan terkejut ketika mereka pindah di situs webnya.

Mike Loves Animation dari tahun 80 -an dan 90 -an – terutama animasi Disney Cerita bebek). Tidak mengherankan, selera saya dalam komik dapat ditelusuri kembali ke Hanna-Barbera pada 1960-an Pesawat mereka,,,,, Scooby,,,,, Bahaya Penelope Pitstop,,,,, Game yang anehtentu saja, ada beruang yogi.

Oleh karena itu, untuk menjelaskan hubungan antara era animasi ini dan CSS, saya memilih Kinerja yogi“Family Sweet Jelly Stone”, pertama kali ditayangkan pada tahun 1961. Dalam cerita ini, Ranger Smith mewarisi rumah besar dan (peringatan spoiler) meninggalkan Purne.

Gerakan anatomi

Dalam episode ini, teknologi Hanna-Barbera begitu tukang pos tiba dengan telegram untuk Ranger Smith. Sisi kamera melintasi lukisan lanskap seniman latar belakang Robert Gentle untuk menciptakan fantasi tukang pos yang bergerak.

Ketika sebuah adegan bertahan lebih lama dari panci lukisan pemandangan Robert Gentle, latar belakang siklus, dan semak -semak dan pohon berulang.

Anda dapat menggunakan masing -masing elemen dan animasi untuk mengubah posisi gambar latar belakang mereka:

@keyframes background-scroll {
  0% { background-position: 2750px 0; }
  100% { background-position: 0 0; }
}

div {
  overflow: hidden;
  width: 100vw;
  height: 540px;
  background-image: url("…");
  background-size: 2750px 540px;
  background-repeat: repeat-x;
  animation: background-scroll 5s linear infinite;
}

Ekonomi Olahraga Sangat penting untuk menghasilkan celana pendek animasi ini dengan murah dan efisien. Sepeda motor tukang pos itu memantul, dengan hanya posisi kepalanya dan ekspresi wajah berubah, yang menambah sedikit realisme.

Sekali lagi, hanya ekspresi wajah dan posisi kaki Ranger Smith saat ia berlari di rumahnya. Sisa tubuhnya tetap statis.

Dalam adegan yang dibuang saya dirancang untuk situs webnya, maskot petualang orangutan yang saya buat untuk Mike Worth dapat melihat di seluruh lanskap.

Saya akan langsung pergi dari Teknik Bounce and Rolling Hanna-Barbera Untuk skenario ini, gunakan dua animasi bingkai kunci: background-scroll Dan bumpy-ride. Bekerja dengan latar belakang pengguliran yang tak terbatas seperti sebelumnya:

@keyframes background-scroll {
  0% { background-position: 960px 0; }
  100% { background-position: 0 0; }
}

Saya menciptakan tampilan perjalanannya yang bergelombang dengan menjiwai perubahan pada perubahan kerangka ke dalamnya translate nilai:

@keyframes bumpy-ride {
  0% { translate: 0 0; }
  10% { translate: 0 -5px; }
  20% { translate: 0 3px; }
  30% { translate: 0 -3px; }
  40% { translate: 0 5px; }
  50% { translate: 0 -10px; }
  60% { translate: 0 4px; }
  70% { translate: 0 -2px; }
  80% { translate: 0 7px; }
  90% { translate: 0 -4px; }
  100% { translate: 0 0; }
}

figure {
  /* ... */
  animation: background-scroll 5s linear infinite;
}

img {
  /* ... */
  animation: bumpy-ride 1.5s infinite ease-in-out;
}

Tonton episode ini dan Anda akan melihat pohon -pohon ini muncul berulang kali. Di trek, di belakang yogi di semak-semak dan boo-boo, dan memperbesar close-up boo-boo ini:

Animator sering Lapisi elemen latar depan ke lukisan latar belakang ini Buat berbagai skenario baru:

Dalam adegan itu saya menghapus dari situs web Mike Worth, saya memperkenalkan batu -batu ini ke latar depan untuk meningkatkan kedalaman animasi:

Jika saya menggunakan gambar bitmap, ini hanya akan membutuhkan satu gambar tambahan:

<figure>
  <img id="bumpy-ride" src=" alt="" />
  <img id="apes-rock" src=" alt="" />
</figure>

figure {
  position: relative; 

  #bumpy-ride { ... }

  #apes-rock {
    position: absolute;
    width: 960px;
    left: calc(50% - 480px);
    bottom: 0;
  }
}

Demikian pula, ketika Ranger membaca telegramnya, hanya mata dan mulutnya yang bergerak:

Jika Anda bertanya -tanya mengapa Ranger Smith dan Yogi beruang, keduanya memakai kerah dan dasi, garis antara kepala animasi, wajah dan tubuh statis tertutup:

SVG menawarkan kinerja yang luar biasa dan memberikan fleksibilitas yang sangat baik saat menghidupkan elemen. Kemampuan untuk menanamkan satu SVG ke dalam kelompok lain dan memanipulasi kelompok dan elemen lain menggunakan CSS membuatnya ideal untuk animasi.

Saya menyalin bagaimana Hanna-Barbera membuat Ranger Smith dan mulut karakter lainnya bergerak terlebih dahulu, termasuk kelompok yang berisi tubuh dan kepala Ranger yang tetap diam setiap saat. Kemudian saya menambahkan enam kelompok lagi, masing -masing berisi mulutnya bergerak:

<svg>
  <!-- static elements -->
  <g>...</g>

  <!-- animation frames -->
  <g class="frame-1">...</g>
  <g class="frame-2">...</g>
  <g class="frame-3">...</g>
  <g class="frame-4">...</g>
  <g class="frame-5">...</g>
  <g class="frame-6">...</g>
</svg>

Saya menggunakan properti khusus CSS untuk menentukan seberapa cepat mulut karakter bergerak dan berapa banyak frame dalam animasi:

:root {
  --animation-duration: 1s;
  --frame-count: 6;
}

Kemudian saya menerapkan animasi bingkai kunci untuk menampilkan dan menyembunyikan setiap bingkai:

@keyframes ranger-talking {
  0% { visibility: visible; }
  16.67% { visibility: hidden; }
  100% { visibility: hidden; }
}

[class*="frame"] {
  visibility: hidden;
  animation: ranger-talking var(--animation-duration) infinite;
}

Ini membuat setiap kerangka kerja terlihat pada waktu yang tepat sebelum akhirnya menetapkan penundaan:

.frame-1 {
  animation-delay: calc(var(--animation-duration) * 0 / var(--frame-count));
}

/* ... */

.frame-6 {
  animation-delay: calc(var(--animation-duration) * 5 / var(--frame-count));
}

Dalam desain saya untuk situs web Mike Worth Animasi tidak hanya digunakan untuk dekorasi; itu menceritakan kisah yang menarik tentang dia dan pekerjaannya. Setiap gerakan mencerminkan identitas mereknya dan menjadikan situs webnya perpanjangan dari dunia kreatifnya.

Lain kali Anda menyentuh animasi CSS, melampaui gerakan. Pertimbangkan juga emosi, identitas, dan emosi. Lagi pula, animasi yang dipikirkan dengan matang dapat melakukan lebih dari sekadar menarik mata seseorang. Itu bisa menangkap imajinasi mereka.

Situs web Mike Worth akan diluncurkan pada Juni 2025, tetapi Anda dapat melihat contoh -contoh dalam artikel ini tentang Codepen.

Dapatkan $ 200 seminggu
Dari artikel di Smashing Magazine – untuk desainer dan pengembang web