Cara Membuat Animasi Gambar Berputar Menggunakan Keyframe Name
Bagi membangun animasi pada sebuah laman tidaklah sulit, dan bagi membuatnya pun banya cara yang dapat kita gunakan salah satunya yakni yang akan saya bahas di kali ini yaitu cara membuat animasi gambar berputar menggunakan keyframe name di sini saya akan membangun objek berputar . Oke seketika saja pertama-tama buka editor masing-masing, di kali ini saya menggunakan dreamwever lalu bikin semuat file html selaku berikut :
<!doctype html>
<html>
<head>
<meta charset=utf-8>
<title>welcome to Source Code Aplikasi</title>
</head>
<body>
<div id=lue>
<div id=gua>
<img src=../img/images.jpg>
</div>
<h3 style=color: green>Data Diri</h3>
<p style=color: green>
Nama : Feri mispandi. S.kom <br>
TTL : Lubuklinggau SUMSEL Cengkareng JAKBAR <br>
Kegiatan : Staff IT <a href=http://www.sourcecodeaplikasi.info/ target=blank>Source Code Aplikasi</a>
</p>
</div>
</body>
</html>
Kemudian save file tersebut di folder masing masing, kalau telah bikin file css nya, di kesempatan kali ini saya menggunakan css internal yang saya sisipkan diantara tag <head> dan</head> lalu ketikan skrip berikut tuntuk mengatur perputaran faktor yang kita bikin
@-webkit-keyframes putar {
from {-webkit-transform: rotateY(0deg);}
to {-webkit-transform: rotateY(-360deg);}}Lalu ketikan pun skrip berikut ini bagi mengatur id atau class yang kita bikin di file html tadi:
#lue{
margin: 1em auto;
background:pink;
width: 500px;
height: 500px;
position:relative;
}
#gua, #gua {
position: absolute;
top: 100px;
left: 94px;
width: 300px;
background:#ccc;
text-align: center;
color: #fff;
margin-top: 10px;
-webkit-animation-name: putar;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 6s;
}
Bagi menjalankan hasil codingan cara membuat animasi gambar berputar menggunakan keyframe name di atas saya menggunakan browser chrome, oleh karena itu saya menggunakan Pengaturan –webkit- di css nya temen temen dapat sesuaikan dengan browser masing masing. Lalu bagi memberikan efek berhenti ketika kita arahkan kursor ke objek ketikan script berkikut di css nya :
#gua:hover {
animation-play-state: paused;
background:#22A5D4;}Berfungsi bagi memberikan efek berhenti ketika kursor kita arahkan ke objek, Oke kalau telah save segala file dan jalankan di browser masing masing. bagi lebih jelasnya silahkan teman – teman lihat Demo
Demikianlah artikel kali ini mengenai cara membuat animasi gambar berputar menggunakan keyframe name semoga bermanfaat untuk semuanya nantikan artikel – artikel saya berikutnya.
Sumber https://kursuswebsite.org
