Cara penggunaan Properti Transisi CSS
05/07/2018 Risman Hakim 1583 Website
Cara penggunaan Properti Transisi CSS - Transisi CSS merupakan suatu efek yang memungkian kita untuk melakukan perubahan dari satu nilai ke nilai lainnya dengan durasi yang telah ditentukan. Banyak sekali transisi yang bisa kita manfaatkan untuk membuat efek. Pada kesempatan kali in akan saya bahas salah satu transisi CSS yakni transition-duration. Nah, bagaimana cara menggunakannya simak Cara penggunaan Properti Transisi CSS berikut ini.
Yang harus diperhatikan dalam menggunakan transisi adalah :
- Tentukan terlebih dahulu objek yang akan ditambahkan transisi
- Properti CSS yakni transition
- Durasi transisi
Secara default penulisan trasisi seperti berikut.
Dimana transiton sebagai properti dan 4s adalah durasi transisi yang diberikan terhadap objek, semakin besar nilai yang diberikan maka akan semakin lama durasi perubahan pada objeknya.
Berikut akan saya praktekan penggunaan transition pada beberapa objek, silahkan kalian bisa ikuti langkah - langkahnya berikut ini.
Silahkan buat satu file index.html kemudian kalian bisa membuat struktur HTML dan membuat beberapa objek, dalam hal ini ada button, dan box.
<body>
<!-- Transition Button -->
<button class="btn1">BUTTON</button>
<button class="btn2">BUTTON</button>
<!-- Transition Width -->
<div id="box"></div>
</body>
Setelah selesai membuat struktur, selanjutnya kita akan membuat efek transisi dengan transition CSS seperti berikut.
<style type="text/css">
button {
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
background: transparent;
transition: 0.5s;
}
.btn1 {
border: 2px solid salmon;
}
.btn1:hover {
border: 2px solid salmon;
background-color: salmon;
color: white;
}
.btn2 {
border: 2px solid aqua;
}
.btn2:hover {
border: 2px solid aqua;
background-color: aqua;
color: white;
}
#box {
width: 80px;
height: 80px;
background: #f90;
margin-top: 30px;
transition: 2s;
cursor: pointer;
}
#box:hover {
width: 200px;
}
</style>
Setelah semua sintak telah diketikan silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya.
Bagaimana, mudah dan menarik bukan hasil yang ditampilkan ? baiklah cukup sekian tutorial mengenai bagaimana Cara penggunaan Properti Transisi CSS, semoga bermanfaat dan selamat mencoba :)
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT
Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.
Learn More
