Wednesday, 1 March 2017

membuat animasi dengan CSS

Bintang Putra March 01, 2017 CSS

membuat animasi dengan CSS - Kali ini ADIBIHAK akan memberikan tutorial tentang cara membuat animasi pada halaman web menggunakan CSS. Animasi berfungsi sebagai hiburan atau cuci mata pada halaman web agar tidak jenuh ataupun bosan. Anda ingin tahu? langsung mulai saja....

jika kalian belum pernah tahu atau membuat animasi dengan CSS, kalian dapat tiru script dibawah ini. ikuti tutorial berikut ini :

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */
-webkit-animation-direction: alternate; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

jika sudah selesai menulis script diatas, berikut hasilnya

Semoga dapat bermanfaat.

About Bintang Putra
SoraTemplates is a blogger resources site is a provider of high quality blogger template with premium looking layout and robust design. The main mission of SoraTemplates is to provide the best quality blogger templates.