Efek Transisi Menggunakan Properti CSS

by -7 views

Labkom99.comEfek transisi CSS digunakan untuk menentukan efek animasi transisi pada elemen. Efek 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 Efek transisi CSS

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 Efek transisi CSS

/* 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;
 

Baca Juga : 10 Website Development Paling Populer

 

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 Efek transisi CSS

<!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>

About Author: labkom99

Gravatar Image
Labkom99 merupakan salah satu situs yang diperuntukkan menambah pengetahuan gratis tentang pemrograman, Akun Sosial, Google Update, Pembaruan Windows, Mac dan Banyak Lagi !!!