18.4.14
12
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 Coding image


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



TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengenal Elemen CSS Animasi Dan Transisi
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

12 komentar

  1. otak saya belum bisa sampai situ mbak :d

    BalasHapus
  2. wah keren nich ada mata bisa terbang juga :)

    BalasHapus
  3. cantik banget kaya orangnya, hehehe...

    BalasHapus
  4. Sungguh bagus dan menarik tutorianya Mbak Devy
    setelah saya lihat demonya jadi kepengen, nyoba dulu Mbak makasih

    BalasHapus
  5. Makasih mbak atas saharing nya :) Nambah ilmu baru nih :)

    BalasHapus
  6. ternyata agak rumit juga ya ccs animasi ini, kebetulan saya nggak paham kak soal css soalnya ruwet heheee :D
    thanks atas share nya ya ;)

    BalasHapus
  7. nice share sob .... wlau sy puyeng liatnya ... hehehe

    BalasHapus
  8. Bingung aku hehehe.

    BalasHapus
  9. Saya agak rumit memahami penggunaan kode css animasi dan transisi, belum tahu dasar-dasarnya. Saya belajarnya hanya css dasar belum sampai css3 atau yang lebih tinggi. hehe

    BalasHapus
    Balasan
    1. pada dasarnya CSS itu sama mas, perbedaannya hanya terletak pada efek yang dapat diciptakan oleh masing-masing CSS-nya,

      Hapus
  10. meski sedikit bingung
    saya coba dulu deh
    makasih ya tutorialnya
    :)

    BalasHapus
    Balasan
    1. jangan bingung-bingung mas, saya hanya memberikan sedikit tutorial tentang pengenalan CSS transisi dan Animasi, karana jika kita ingin membuat gambar bergerak sangat mudah dengan format.gif,namun jika pada template hal ini tidak SEO, jika ingin membuat gambar bergerak gunakan CSS seperti pada tutorial ini,
      maksud artikel diatas kurang lebih seperti itu

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK