Rabu, 03 Desember 2014

tugas pwl makalah css animation



CSS ANIMATION




Nama         : Salma Ariyani
Nim            : 13.02.8548
Kelas          : D3-MI-03
Tugas         : Pemrograman Web Lanjut
Link :http://salmaariyani.blogspot.com/2014/12/tuigas-pwl-makalah-css-animation.html


`             STMIK AMIKOM YOGYAKARTA
2014




Apa Animasi di CSS3?

Animasi adalah suatu efek yang memungkinkan elemen secara bertahap berubah dari satu gaya yang lain.
Anda dapat mengubah sebagai banyak gaya yang Anda inginkan, sebanyak yang Anda inginkan.
Menentukan kapan perubahan akan terjadi dalam persen, atau kata kunci “dari” dan “untuk”, yang adalah sama dengan 0% dan 100%.

0% adalah awal dari animasi, 100% adalah ketika animasi selesai.
Untuk dukungan browser terbaik, Anda harus selalu menentukan baik% pada 0 dan penyeleksi 100%.

Contoh : Mengubah warna latar belakang saat animasi adalah 25%, 50%, dan lagi ketika animasi adalah 100% selesai:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:red;}
15%  {background:yellow;}
25%  {background:green;}
50%  {background:blue;}
75%  {background:pink;}
100% {background:black;}
</style>
</head>
<body>
<div></div>
<p><b>Catatan :</b> Contoh ini tidak bisa bekerja di Internet Explorer dan Opera Mini. </p>
<p><b>Catatan :</b> Ketika animasi selesai, ia akan berubah kembali ke gaya aslinya. </p>
</body>
</html>

Penggunaannya sangat mudah, anda tinggal menambahkan class yang telah disediakan oleh animate.css dan element yang anda beri classpun akan bergerak sesuai dengan tipe animasi yang dipilih. Pertama-tama, download library animate.css dari link yang saya sebutkan di atas, lalu sertakan dalam dokumen HTML anda dengan menggunakan tag link.
<link rel="stylesheet" href="animate.css" />

Setelah itu kita tinggal menambahkan class animated dan nama animasi yang disediakan. Contohnya kita ingin membuat animasi bounce dari kiri.
Aku Adalah Aku
<div class="animated bounceInleft">Woeewwwww.... Woeeewwwww.... OK</div>
Dengan demikian div tersebut akan beranimasi seolah-olah memantul masuk dari sebelah kiri. Untuk merubah durasi dari animasi, atau menambahkan delay sebelum animasi dijalankan atau anda ingin agar animasi dijalankan secara terus-menerus anda dapat menambahkan style berikut :

div{
    -browser-animation-duration: 3s; /* animasi akan berjalan selama 2detik */
    -browser-animation-delay:5s; /* animasi akan dijalankan setelah 5detik */
    -browser-animation-iteration-count: infinite; /* akan menjalankan animasi secara terus menerus. */
}
Ingat, kata -browser diatas harus diganti dengan -webkit, -moz, -ms dan -o sesuai dengan apa yang kita butuhkan untuk lintas browser. Untuk daftar nama animasi yang bisa anda gunakan bisa dilihat dilink yang telah saya sebutkan di atas jadi tinggal anda yang berkreasi :)





Memberi Efek Animasi Dengan CSS
Untuk membuat background bisa berubah warna maka kita membutuhkan fitur animation dari CSS3, seperti ini kode nya

body{
        background-color: #f1c40f;
        -webkit-animation: color 5s ease-in  0s infinite alternate running;
        -moz-animation: color 5s linear  0s infinite alternate running;
        animation: color 5s linear  0s infinite alternate running;
        }
       
        /* Animasi + Prefix untuk browser */
        @-webkit-keyframes color {
            0% { background-color: #f1c40f; }
            32% { background-color: #e74c3c; }
            55% { background-color: #9b59b6; }
            76% { background-color: #16a085; }
            100% { background-color: #2ecc71; }
        }
        @-moz-keyframes color {
             0% { background-color: #f1c40f; }
            32% { background-color: #e74c3c; }
            55% { background-color: #9b59b6; }
            76% { background-color: #16a085; }
            100% { background-color: #2ecc71; }
        }
        @keyframes color {
            0% { background-color: #f1c40f; }
            32% { background-color: #e74c3c; }
            55% { background-color: #9b59b6; }
            76% { background-color: #16a085; }
            100% { background-color: #2ecc71; }
        }


CSS Box Animasi Dengan Effect Hover CSS Animasi
CSS :
.boxanimasi {
background: #e3e3e3;
border: 1px solid #666;
margin: auto;
width: 400px;
height: 200px;
cursor: pointer;
position: relative;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
}
.boxanimasi::after {
content: '';
position: absolute;
width: 70%;
height: 10px;
bottom: 0;
left: 15%;
z-index: -1;
-webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
.boxanimasi > div {
position: absolute;
width: 100%; height: 100%;
top: 0; left: 0;
background: #e3e3e3;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
font: 45px/200px bold helvetica, arial, sans-serif;
text-align: center;
text-shadow: 0 1px 0 white;
}
.boxanimasi > div:first-child {
position: relative;
z-index: 2;
}
.boxanimasi:hover {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.boxanimasi:hover > div:first-child {
opacity: 0;
}
.boxanimasi:hover div:last-child {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}

HTML :
<div class="boxanimasi">
<div>
Welcome</div>
<div>
To My Blog</div>
</div>


Keseluruhan Kode Bila Di Pasang :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Design Template</title>
<style type="text/css">
   .boxanimasi {
   background: #e3e3e3;
   border: 1px solid #666;
   margin: auto;
   width: 400px;
   height: 200px;
   cursor: pointer;
   position: relative;
   -webkit-transition: all 1s;
   -moz-transition: all 1s;
   transition: all 1s;
}
   .boxanimasi::after {
   content: '';
   position: absolute;
   width: 70%;
   height: 10px;
   bottom: 0;
   left: 15%;
   z-index: -1;
   -webkit-box-shadow: 0 9px 20px rgba(0,0,0,.4);
   -moz-box-shadow: 0 9px 20px rgba(0,0,0,.4);
   box-shadow: 0 9px 20px rgba(0,0,0,.4);
}
   .boxanimasi > div {
   position: absolute;
   width: 100%; height: 100%;
   top: 0; left: 0;
   background: #e3e3e3;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition: all .5s ease-in-out;
   transition: all .5s ease-in-out;
   font: 45px/200px bold helvetica, arial, sans-serif;
   text-align: center;
   text-shadow: 0 1px 0 white;
}
   .boxanimasi > div:first-child {
   position: relative;
   z-index: 2;
}
   .boxanimasi:hover {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
}
   .boxanimasi:hover > div:first-child {
   opacity: 0;
}
   .boxanimasi:hover div:last-child {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   transform: rotateY(180deg);
}


</style>
</head>


<body>
<div class="boxanimasi">
<div>
   Welcome</div>
<div>
   To My Blog</div>
</div>
</body>
</html>




Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)