Mengenal Elemen CSS Animasi Dan Transisi

Mengenal Elemen CSS Animasi Dan Transisi - Elemen CSS Animasi biasanya dibentuk untuk membuat atau menciptakan beberapa objek agar dapat bergerak dengan perintah auto effect, sedangkan untuk Elemen CSS Transisi merupakan kode perintah untuk membuat objek bergerak dengan perintah hover.

CSS Animasi pada - Membuat Efek CSS Animasi Pada Tulisan
CSS Transisi pada - Membuat Spoiler Box Dengan CSS Transisi

Disana Anda dapat melihat beberapa efek bergerak tanpa ada sentuhan hover, dan sebaliknya objek diam akan bergerak saat panah mouse Anda melintas (Hover). Pada dasarnya Pseudo elemen CSS animasi dan transisi memiliki kesamaan dalam menciptakan suatu objek agar dapat bergerak sesuai dengan perintah kelas-kelas elemen, namun yang membedakan hanya pada pembangun kode dalam elemen CSS masing-masing, seperti pada efek Hover berikut dengan CSS transisi



DEMO SHOW



Elemen CSS berikut saya hanya membuat sebuah lingkaran yang saya desain dengan penggabungan transisi:box-shadow dengan value inset color (RGBA), sehingga bentuk lingkaran menjadi berwarna-warni, dan menggunakan background gerak dengan elemen CSS transisi hover

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

.circle h1 {
  color: rgba(189, 185, 199,0);
  font: bold 1.6em 'Georgia', sans-serif;
  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;}

.circle:after {transform: rotate(45deg);}
.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);}

Pembangun kelas Elemen HTML

<div class="circle">
<h1>
Your Blog</h1>
</div>

Setelah Anda mengenal kedua elemen CSS diatas, apakah CSS animasi dan transisi bisa disandingkan dalam satu perintah kode.? Jawabannya bisa, karena saya sudah pernah mencoba membuat objek gerak dengan menggabungkan animasi dan transisi dalam satu wilayah elemen CSS. Dan hasilnya seperti tombol DEMO SHOW dibawah ini

DEMO SHOW