Efek Transisi Menggunakan Properti CSS


Labkom99.com - Properti transisi CSS digunakan untuk menentukan efek animasi transisi pada elemen. Properti CSS tersebut merupakan gabungan properti singkatan dari transition-propertytransition-duration , transition-timing-function dan transition-delay.

 

Atribut  transition digunakan untuk membuat efek transisi yang dinamis untuk animasi elemen. Sehingga dapat membuat transisi elemen yang bagus antara dua keadaan. Keadaan yang berbeda dapat didefinisikan menggunakan elemen :hover:active pseudo-like atau diatur secara dinamis menggunakan JavaScript.

 

Urutan penulisan properti transition pada animasi transisi tertentu properti tidak boleh sembarangan. Harus ditulis dengan urutan seperti berikut: properti animasi> durasi animasi> kurva kecepatan animasi> waktu tunda animasi. transition Pertama kali muncul pada atribut akan diuraikan sebagai durasi transisi. Jika ada untuk kedua kalinya, ini akan diuraikan sebagai transition-delay .


Baca Juga : Belajar HTML5 Element Drag And Drop HTML5


Anda dapat menentukan beberapa atribut transition dalam deklarasi yang sama, dipisahkan dengan koma. Misalnya seperti ini:


/* singgle transition */
transition: background-color .3s linear;
/*multiple transitions */
transition: color .6s ease, font-size .3s linear;
transition: background-color 1s linear,
            left .6s ease-out 1s,
            transform 1s steps(3, start);

 

Jika Anda menentukan beberapa transition-property dalam deklarasi dan salah satunya tidak menentukan transition-property, maka transition deklarasi tersebut tidak valid. Perhatikan bahwa tidak semua properti CSS dapat menjalankan efek animasi. 


Baca Juga : Panduan Dasar Web Development

 

Penulisan

transition: <single-transition> [ ',' <single-transition> ]*  
in
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> 
                                          || <time>

parameter:

single-transition : Satu atau beberapa deklarasi transisi animasi, dipisahkan dengan koma. Setiap deklarasi transisi animasi terdiri dari properti transisi animasi tertentu.


Baca Juga : Tools Web Development Bagian Front End


Nilai transition awal atribut none 0s ease 0s.  Keduanya adalah nilai awal dari setiap properti animasi transisi tertentu.

 

Lingkup Aplikasi

Properti transition dapat diterapkan ke semua elemen, seperti :before dan :after elemen pseudo.

 

Contoh Kode

/* Animation attribute name | Duration */
transition: margin-left 4s;
 
/* property animation property name | duration | delay time */
transition: margin-left 4s 1s;
 
/* Animation attribute name | Duration | Speed curve | Delay time */
transition: margin-left 4s ease-in-out 1s;
 
/* 2 transition attributes */
transition: margin-left 4s, color 1s;
 
/* Use transition animation effects for all changes of elements */
transition: all 0.5s ease-out;


Demo

Contoh berikut menunjukkan efek menggunakan transition-animation transisi dan tidak menggunakan transition-animation transisi.


1

2

 

 

 

Kompatibel Browser

Daftar kompatibilitas browser property transition CSS3  adalah sebagai berikut:


Efek Transisi Menggunakan Properti CSS


Kode Lengkap

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Labkom99.com | Efek Transisi Menggunakan Properti CSS</title>
    <meta name="keywords" content="transition,html,css">
    <meta name="description" content="Efek Transisi Menggunakan Properti CSS,transition-property、transition-duration、transition-timing-function dan transition-delay。" />
    <style>
        .demo-container{
          position: relative;
          width: 100%;
          height: 300px;
          margin:0 auto;
          padding: 20px;
          border: 5px dashed #e2e2e2; 
        }

        .box{
          position: absolute;
          margin-top: 15px;
          width: 100px;
          height: 100px;

        }
        .box p{
          text-align: center;
          line-height: 90px;
          font-size: 1.5em;
          color: #fff;
        }
        .box1{
          top: 20px;
          left: 20px;
          background-color: #22a7f0;
        }
        .box2{
          top: 150px;
          left: 20px;
          background-color: #d2527f;
        }
        .demo-container:hover .box1{
        left: 400px;
        -webkit-transition-property: left;
          transition-property: left;
          -webkit-transition-duration: 2s;
          transition-duration: 2s;
        -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
        }
        .demo-container:hover .box2{
          left: 400px;
        }
      </style>

  </head>
  <body>
    <div class="demo-container">
    <div class="box box1"><p>1</p></div>
    <div class="box box2"><p>2</p></div>
    </div>
  </body>
</html>

Komentar