Contoh Pseudo-Elements Animasi dan Transisi

Kita akan berbicara sedikit tentang pseudo-elemen dan melihat empat contoh yang menggunakan beberapa teknik khusus untuk mencapai berbagai efek. Empat contoh berikut diciptakan untuk topik tertentu. Hal ini jelas bahwa ada cara lain untuk mencapai efek visual yang sama, tetapi untuk kepentingan percobaan ini, kita tentu saja akan menggunakan pseudo-elemen jadi di ingat bahwa ini hanya bekerja pada browser yang mendukung animasi dan transisi pseudo-elemen.

Contoh 1

Animasi setetes air yang jatuh ke dalam wadah bulat
Markup HTML

<div class="drop"> </div>

Meskipun hanya memiliki satu unsur tapi bisa memiliki .container lain yang membantu perubahan skala.
CSS

*,
*:before,
*:after {
    box-sizing: border-box;
}

.drop {
 background: rgba(255, 255, 245, 1);
 border: 4px solid rgba(255, 245, 235, 1);
 border-radius: 100%;
 box-shadow: inset -0.1em 0 2em 0.5em rgba(255, 255, 255, 0.5), 
             inset -0.1em 0 0.5em 0 rgba(0, 0, 0, 0.8);
 position: relative;
 margin: 0 auto;
 width: 15em; 
 height: 15em;
 overflow: hidden;
}

.drop:before,
.drop:after {
 content:"";
 display:block;
 position:absolute;
}

/* Drop */

.drop:before {
 background: rgba(167, 217, 234, 1);
 border-radius: 100%;
 
 /* Drop start */
 
 box-shadow: 0 0 0 0.1em rgba(167, 217, 234, 0.8), 
             0 0 0 0.15em rgba(167, 217, 234, 0.8), 
             0 0 0 0.2em rgba(167, 227, 234, 0.8), 
             0 0 0 0.25em rgba(167, 227, 234, 0.8), 
             0 0 0 0.3em rgba(167, 227, 234, 0.8), 
             0 0 0 0.35em rgba(167, 227, 234, 0.8), 
             0 0 0 0.4em rgba(167, 227, 234, 0.8), 
             0 0 0 0.45em rgba(167, 227, 234, 0.8), 
             0 0 0 0.5em rgba(167, 227, 234, 0.8);
 top: 0%; left: 50%;
 
 /* The "width" and "height" of the division must be smaller than the "box-shadow" total size. So we can control different variant sizes. */
 
 width: 0.2em; 
 height: 0.2em;
 animation: fall 3.5s cubic-bezier(0.5, 0, 1, 0.5) infinite;
}

/* Surface */

.drop:after {
 background: rgb(52, 152, 219);
 background: linear-gradient(rgba(52, 255, 255, 1) 0%, rgba(52, 152, 219, 1) 10%, rgba(152, 252, 219, 1) 100%);
 border-radius: 100% 0 50% 0;
 left: 0; 
 bottom: 0;
 width: inherit; 
 height: 3em;
 opacity: 0.7;
 animation: surface 3s linear infinite;
}

/* Drop animation */

@keyframes fall  {

 /* Drop form */

 5%, 15%  {
  box-shadow: 0 -1.4em 0 0.1em rgba(167, 217, 234, 1), 
              0 -0.8em 0 0.15em rgba(167, 217, 234, 1), 
              0 -0.3em 0 0.2em rgba(167, 217, 234, 1), 
              0 -0.1em 0 0.25em rgba(167, 217, 234, 1), 
              0 0 0 0.3em rgba(167, 217, 234, 1), 
              0 0.2em 0 0.35em rgba(167, 217, 234, 1), 
              0 0.4em 0 0.4em rgba(167, 217, 234, 1), 
              0 0.6em 0 0.45em rgba(167, 217, 234, 1), 
              0 0.8em 0 0.5em rgba(167, 217, 234, 1);
 }
 
 /* Drop fall */
 
 16%  {
  top: 80%;
 }
 
 /* Contact surface */
 
 18%  {
  top: 80%;
  box-shadow: 1em -8em 0 0.2em rgba(177, 227, 234, 1), 
              -2.2em -3.8em 0 0.1em rgba(177, 227, 234, 1), 
              3em -2.85em 0 0.3em rgba(177, 227, 234, 1), 
              -3.5em -4em 0 0.2em rgba(177, 227, 234, 1), 
              0 0 0 0.3em rgba(177, 227, 234, 1), 
              2em -2em 0 0.2em rgba(177, 227, 234, 1), 
              -0.3em -3em 0 0.2em rgba(177, 227, 234, 1), 
              0.5em -5em 0 0.35em rgba(177, 227, 234, 1), 
              -3em -1em 0 0.3em rgba(177, 227, 234, 1);
 }
 
 /* Dispersion */
 
 30%  {
  top: 90%;
  box-shadow: 1.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              -2em 0 0 0.15em rgba(252, 252, 255, 0.1), 
              3em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              -2em 0 0 0.25em rgba(252, 252, 255, 0.1), 
              0 0 0 0.2em rgba(252, 252, 255, 0.1), 
              2.35em 0 0 0.3em rgba(252, 252, 255, 0.1), 
              -0.5em 0 0 0.2em rgba(252, 252, 255, 0.1), 
              1em 0 0 0.3em rgba(252, 252, 255, 0.1), 
              -4em 0 0 0.4em rgba(252, 252, 255, 0.1);
 }
 
 /* Hidden */
 
 40%, 100%  {
  top: 95%;
  background: rgba(255, 255, 255, 1);
  box-shadow: 1.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
              -3em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              4em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              -3.5em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              0 0 0 0.3em rgba(255, 255, 215, 0), 
              2.45em 0.5em 0 0.1em rgba(255, 255, 255, 0), 
              -0.8em 0.5em 0 0.2em rgba(255, 255, 255, 0), 
              1.5em 0.5em 0 0.3em rgba(255, 255, 255, 0), 
              -4.5em 0.5em 0 0.2em rgba(255, 255, 255, 0);
 }
}

/* Animation of water surface */

@keyframes surface  {
 50%  {
  border-radius: 0 75% 0 75%;
  opacity: 0.5;
  height: 3.5em;
 }
}

Berikut adalah dua tips untuk mendapatkan animasi lebih naturalistik:

• Menonton dan menganalisa referensi seperti gambar, video, dll
• Percobaan dengan kecepatan yang berbeda untuk transisi properti CSS dan keyframes.

Lebih lanjut tentang menghidupkan karakter langsung saja ke masternya "The Animator Survival Kit" oleh Richard Williams .

Contoh 2

Dalam contoh ini kita akan membuat efek hover dengan menggunakan transisi.
Markup HTML

<div class="circle">
 <h1>Anarchyta</h1>
</div>

Di sini hanya memiliki .container dan judul untuk memisahkan teks dari yang lain.
CSS

.circle {
 background: rgb(255,255,255);
 border-radius: 100%;
 cursor: pointer;
 position: relative;
 margin: 0 auto;
 width: 15em; 
 height: 15em;
 overflow: hidden;
 transform: translateZ(0);
}

.circle h1 {
 color: rgba(189, 185, 199,0);
 font-family: 'Lato', sans-serif;
 font-weight: 900;
 font-size: 1.6em;
 line-height: 8.2em;
 text-align: center;
 text-transform: uppercase;
 -webkit-font-smoothing: antialiased;
 user-select: none;
 transition: color 0.8s ease-in-out;
}

.circle:before,
.circle:after {
 border-radius: 100%;
 content:"";
 position: absolute;
 top: 0; 
 left: 0;
 width: inherit; 
 height: inherit;   
 box-shadow: inset 10.6em 0 0 rgba(30, 140, 209, 0.2), 
             inset 0 10.6em 0 rgba(30, 140, 209, 0.2), 
             inset -10.6em 0 0 rgba(30, 140, 209, 0.2), 
             inset 0 -10.6em 0 rgba(30, 140, 209, 0.2);
 transition: box-shadow 0.75s;
}

/* We rotate the :after pseudo-element to get the edge from the corner, we could also just do that with box-shadows. */

.circle:after  {
 transform: rotate(45deg);
}

/* There is no problem using "pseudo-class + pseudo-element" :) */

.circle:hover:before,
.circle:hover:after  {
 box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5), 
             inset 0 0.86em 0 rgba(252, 150, 0, 0.5), 
             inset -0.86em 0 0 rgba(0, 255, 0, 0.5), 
             inset 0 -0.86em 0 rgba(0, 150, 255, 0.5);
}

.circle:hover > h1  {
 color: rgba(185, 185, 185,1);
}

Anda harus menggunakan hanya satu warna, untuk menghindari pencampuran warna yang tidak diinginkan dengan (.overlay ketika memicu hover / mengarahkan mouse pada object.

Contoh 3

Loading Animasi, Idenya di sini adalah untuk menggabungkan warna melalui rotasi. Ini sangat sederhana!
Markup HTML
Cukup menggunakan satu elemen tunggal untuk HTML ini.

<div class="loading"></div>

CSS

.loading  {
 background: rgba(0, 50, 250, 0);
 position: relative;
 margin: 5em auto 0 auto;
 width: 3em; 
 height: 3em;
 animation-name:rotate;
}

.loading,
.loading:before,
.loading:after  {
 border-radius: 100%;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in;
}

.loading:before,
.loading:after  {
 content: "";
 position: absolute;
 top: 0; 
 left: 0;
 width: inherit; 
 height: inherit;
}

.loading:before  {
 background: rgba(200, 250, 100, 0);
 animation-name: ring;
}

.loading:after  {
 background: rgba(250, 0, 200, 0);
 animation-name: ring2;
}

@keyframes rotate  {
 0%  {
  transform: rotateZ(0deg) scaleX(0.1) scaleY(0.1) translateZ(0);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 85%, 100%  {
 
 /* 360deg * 10 */
 
  transform: rotateZ(3600deg) scaleX(2.01) scaleY(2) translateZ(0);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

@keyframes ring  {
 0%  {
  transform: scaleX(0.1) scaleY(0.5);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 75%, 100%  {
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

@keyframes ring2  {
 0%  {
  transform: scaleX(0.5) scaleY(0.1);
  box-shadow: inset 0.8em 0 0 rgba(255, 0, 0, 0.5), 
     inset 0 0.8em 0 rgba(252, 150, 0, 0.5), 
     inset -0.8em 0 0 rgba(0, 255, 0, 0.5), 
     inset 0 -0.8em 0 rgba(0, 150, 255, 0.5);
 }
 
 /* hidden */
 
 65%, 100%  {
  transform: scaleX(2) scaleY(2.1);
  box-shadow: inset 0 0 0 rgba(255, 0, 0, 0), 
     inset 0 0 0 rgba(252, 150, 0, 0), 
     inset 0 0 0 rgba(0, 255, 0, 0), 
     inset 0 0 0 rgba(0, 150, 255, 0);
 }
}

Ini adalah contoh yang bagus untuk bereksperimen dengan timing dan kecepatan untuk mendapatkan animasi yang baik.

Contoh 4

Ini adalah contoh yang paling Edan dari semua: sedikit makhluk terbang bermata satu!
Kita akan menggunakan keduanya, animasi dan transisi.
Markup HTML

Arahkan mouse pada mata pojoro untuk melihat animasi sayap.

<div class="pojoro">●</div>

CSS

.pojoro  {
 background: rgba( 255, 255, 255, 1);
 background: radial-gradient(ellipse at center, rgba(255,255,255,1) 40%,rgba(51,51,51,1) 100%);
 border-radius: 100%;
 
 /* box-shadow: secondary color, body, eyelash */
 
 box-shadow: 0 0 0 0.2em rgb(146,89,149), 
    0 0 0.1em 0.55em rgb(176,89,179), 
    inset 0 0.2em 0 0 rgb(136,79,139);
 
 /* ojo (eye) */
 
 color: rgba( 40, 40, 40, 0.8);
 line-height: 1.1em;
 padding-left: 0.18em;
 -webkit-font-smoothing: antialiased;
 user-select: none;
 
 /* usability, position and transition */
 
 cursor: pointer;
 position: relative;
 margin: 5em auto 0 auto;
 width: 1em; height: 1em;
 transform-origin: center;
 transition: all 0.8s ease-in-out;
 
 /* Separate the animations to have a better control over the eye and the body */
 
 animation: eye 2.2s ease-in-out infinite, body 1.15s 1.8s linear infinite; 
} 

/* Elevate and distort the creature. */

.pojoro:hover  {
 transform: scaleY(0.9) scaleX(0.95) translateY(-3em) translateZ(0);
}

/* wings */

.pojoro:before,
.pojoro:after  {
 background: rgba(0,0,0,0);
 border-radius: 100%;
 content: "";
 
 /* display:none, hide wings */
 
 display: none;
 position: absolute;
 width: 1em; height: 0.1em;
 -webkit-filter: blur(1px);
 transition: all 0.2s;
 animation-duration: 0.2s;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
}

.pojoro:before  {
 top: 25%; left: 1.45em;
 margin-left: -1em;
 transform-origin: left;
 transform: rotate(-60deg);
 animation-name: wings;
}

.pojoro:after  {
 top: 25%; left: -2.2em;
 margin-left: 1em;
 transform-origin: right;
 transform: rotate(60deg);
 animation-name: wings2;
}

.pojoro:hover:before,
.pojoro:hover:after  {
 background: rgba(100,100,100,0.8);
 
 /* display:block, we allow the wings to appear and the animation starts */
 
 display: block;
 margin-left: 0em;
 width: 2em; height: 0.3em;
}

@keyframes eye  {

 /* Eye movement */
 
 5%, 10%  {
  line-height: 1.2em;
  padding-left: 0em;
 }
 15%, 20%  {
  line-height: 1.15em;
  padding-left: 0.4em;
 }
 
 /* Eyelash movement */
 
 25%  {
  box-shadow: 0 0 0 0.2em rgb(146,89,149), 
     0 0 0.1em 0.55em rgb(166,89,169), 
     inset 0 1em 0 0 rgb(136,79,139);
 }
 23%, 27%  {
  box-shadow: 0 0 0 0.2em rgb(146,89,149), 
     0 0 0.1em 0.55em rgb(166,89,169), 
     inset 0 0.2em 0 0 rgb(136,79,139);
 }
}

@keyframes body  {
 50%  {
  width: 1.4em; height: 1.4em;
 } 
}

@keyframes wings  {
 50%  {
  transform: rotate(65deg);
 }
}

@keyframes wings2  {
 50%  {
  transform: rotate(-65deg);
 }
}

Dan itu adalah contoh terakhir!

Kesimpulannya, adalah hal besar untuk menggabungkan Pseudo-Elements dengan animasi dan transisi memungkinkan untuk menciptakan beberapa efek yang menyenangkan tanpa menggunakan terlalu banyak HTML atau gambar. Sampai kemudian kita bisa bermain dengan Pseudo-Elements dan menemukan teknik yang menarik.

Apa pendapat Anda tentang hal ini?