Contoh Bentuk-Bentuk Konsep Animasi - Langkah penting untuk mendapatkan dan membuat bentuk sebuah konsep animasi adalah properti yang digunakan untuk memanggil dan mengendalikan jumlah gerak yang dihasilkan dari prefiks keyframes animasi. Itu sebabnya jika kita ingin membuat sebuah bentuk konsep animasi, disana akan terdapat kode @keyframes yang harus kita tuliskan seperti ini:
Jika Anda mengatakan konsep animasi merupakan elemen gerak untuk menjalankan objek dengan jumlah 2 kali gerak yang selalu bergantian, maka saat Anda membuat bentuk animasi yang memiliki awal dan akhir yang sifatnya sama, salah satu cara untuk melakukannya adalah dengan memisahkan koma pada awal 0% sampai akhir 100%, karena nilai-nilai pada individu properti animasi adalah ruang kosong. Sedangkan untuk nilai urutan bisa Anda tentukan sendiri, kecuali untuk nilai durasi dan delay seperti ini:
CONTOH BENTUK KONSEP ANIMASI
Berikut beberapa contoh bentuk elemen gerak yang dapat di hasilkan dari konsep properti keyframes animasi:
# ROTASI BLINK COLOR
Hasilnya:
DEMO SHOW
Disana Anda bisa menyaksikan beberapa contoh bentuk-bentuk konsep animasi dengan berbagai variasi. Namun perlu diketahui, dengan CSS-animasi (syntax @keyframes) itu tidak semudah yang Anda bayangkan untuk membuat objek gerak seperti ini. Anda perlu mendapatkan dukungan pada browser yang Anda gunakan seperti :
Terkadang demi untuk mempersingkat atau memperpendek potongan kode, [( mengatakan: dengan penggunaan -webkit dan -moz pada halaman yang tidak menggunakan prefiks adalah tidak valid )] penggunaan kode ini sering tidak di ikut sertakan saat membuat konsep animasi, sehingga hasilnya tidak dapat bekerja saat ditampilkan. Tetapi pada dasarnya dengan menyertakan kode tersebut wajib kita gunakan untuk mendapatkan dukungan pada semua vendor browser.
Animasi, seperti transisi, dapat mengubah elemen halaman dari waktu ke waktu. Dalam membuat dan membentuk konsep Animasi yang lebih kuat dan lebih kompleks, Anda perlu mendeklarasikan animasi dengan sintaks khusus sebelum Anda dapat menggunakannya, dan menentukan nilai untuk beberapa properti pada persentase yang berbeda dari awal sampai akhir animasi selesai (keyframes). Kemudian ketika Anda akan menggunakan dan menampilkannya, ada banyak nilai-nilai yang dapat Anda tentukan untuk tampilan konsep animasi Anda. Sehingga dengan semua itu, maka disana akan banyak terdapat bentuk animasi yang menarik untuk di saksikan.
//durasi
@keyframes (NAME-YOUR-ANIMATION) {
0% { opacity: 0; }
100% { opacity: 1; }
}
//multiple step
@keyframes (NAME-YOUR-ANIMATION) {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
//combinasi animasi
@keyframes (NAME-YOUR-ANIMATION) {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes (NAME-YOUR-ANIMATION) {
0% { opacity: 0; }
100% { opacity: 1; }
}
//multiple step
@keyframes (NAME-YOUR-ANIMATION) {
0% {
font-size: 10px;
}
30% {
font-size: 15px;
}
100% {
font-size: 12px;
}
}
//combinasi animasi
@keyframes (NAME-YOUR-ANIMATION) {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Jika Anda mengatakan konsep animasi merupakan elemen gerak untuk menjalankan objek dengan jumlah 2 kali gerak yang selalu bergantian, maka saat Anda membuat bentuk animasi yang memiliki awal dan akhir yang sifatnya sama, salah satu cara untuk melakukannya adalah dengan memisahkan koma pada awal 0% sampai akhir 100%, karena nilai-nilai pada individu properti animasi adalah ruang kosong. Sedangkan untuk nilai urutan bisa Anda tentukan sendiri, kecuali untuk nilai durasi dan delay seperti ini:
1s = duration, 2s = delay, 3 = iterations.
Update.!
Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, sampai pada akhir urutan animasi, yang kemudian akan berbalik keawal secara otomatis.
Update.!
Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, sampai pada akhir urutan animasi, yang kemudian akan berbalik keawal secara otomatis.
CONTOH BENTUK KONSEP ANIMASI
Berikut beberapa contoh bentuk elemen gerak yang dapat di hasilkan dari konsep properti keyframes animasi:
# ROTASI BLINK COLOR
<style type="text/css">
#color-blink {
background:black;
text-align:center;
padding:10px;
height:80px;
width:80px;
border-radius:50%;
position:absolute;
top:calc(50% - 40px);
left:calc(50% - 40px);
box-shadow:
178px 0 0 -25px black,
178px 0 0 -20px red,
-178px 0 0 -25px black,
-178px 0 0 -20px red,
0 0 0 20px black,
0 0 0 30px red,
0 0 0 130px black,
0 0 0 135px red;
-moz-animation: rotate 3s linear infinite;
-webkit-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;}
#color-blink:before {
content: " ";
position: absolute;
height:50px;
width:50px;
border-radius:50%;
top: -155px;
left: 20px;
background:black;
border: 5px solid #00FF7F;
box-shadow:
0 355px 0 -5px black,
0 355px 0 0px #00FF7F;
-moz-animation: reverseRotate 3s linear infinite;
-webkit-animation: reverseRotate 3s linear infinite;
animation: reverseRotate 3s linear infinite;}
#color-blink:after {
content: " ";
position: absolute;
height:280px;
width:280px;
left:-90px;
top:-90px;
background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSAiaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDEwMCAxMDAiID4NCiAgICA8Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMC45NTIiIHN0cm9rZS13aWR0aD0iOCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIvPg0KPC9zdmc+");
background-repeat: no-repeat;
z-index:2;
-moz-animation: segmentRotate 300s linear infinite;
-webkit-animation: segmentRotate 300s linear infinite;
animation: segmentRotate 300s linear infinite;}
@keyframes rotate {
0% { transform: rotate( 0deg); }
10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
background: black;
box-shadow:
178px 0 0 -25px black,
178px 0 0 -20px #40E0D0,
-178px 0 0 -25px black,
-178px 0 0 -20px #40E0D0,
0 0 0 20px black,
0 0 0 30px #40E0D0,
0 0 0 130px black,
0 0 0 135px #40E0D0;}
12.5%, 37.5%, 62.5%, 87.5% {
background: #FFFF00;
box-shadow:
178px 0 0 -25px #39f,
178px 0 0 -20px #39f,
-178px 0 0 -25px #39f,
-178px 0 0 -20px #39f,
0 0 0 20px black,
0 0 0 30px #39f,
0 0 0 130px black,
0 0 0 135px #39f;}
100% { transform: rotate(360deg); }}
@keyframes reverseRotate {
0% { transform: translateY(178px) rotate(0deg) translateY(-178px) rotate(0deg); }
10%, 15%, 35%, 40%, 60%, 65%, 85%, 90% {
background: black; box-shadow: 0 355px 0 -5px black, 0 355px 0 0px magenta; }
12.5%, 37.5%, 62.5%, 87.5% {
background: magenta; box-shadow: 0 355px 0 -5px magenta, 0 355px 0 0px magenta; }
100% { transform: translateY(178px) rotate(-720deg) translateY(-178px) rotate(0deg); }}
@keyframes segmentRotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-32000deg); }}
</style>
<div id='color-blink'>
SAHABAT BLOGGER 77
</div>Hasilnya:
Disana Anda bisa menyaksikan beberapa contoh bentuk-bentuk konsep animasi dengan berbagai variasi. Namun perlu diketahui, dengan CSS-animasi (syntax @keyframes) itu tidak semudah yang Anda bayangkan untuk membuat objek gerak seperti ini. Anda perlu mendapatkan dukungan pada browser yang Anda gunakan seperti :
syntax animasi:
@-webkit-animation for ( Chrome, Safari 4+ )
@-moz-animation for ( Fx 5+ )
@-o-animation for ( Opera 12+ )
@animation for all browser ( IE 10+, Fx 29+ )
@-webkit-animation for ( Chrome, Safari 4+ )
@-moz-animation for ( Fx 5+ )
@-o-animation for ( Opera 12+ )
@animation for all browser ( IE 10+, Fx 29+ )
Terkadang demi untuk mempersingkat atau memperpendek potongan kode, [( mengatakan: dengan penggunaan -webkit dan -moz pada halaman yang tidak menggunakan prefiks adalah tidak valid )] penggunaan kode ini sering tidak di ikut sertakan saat membuat konsep animasi, sehingga hasilnya tidak dapat bekerja saat ditampilkan. Tetapi pada dasarnya dengan menyertakan kode tersebut wajib kita gunakan untuk mendapatkan dukungan pada semua vendor browser.
Animasi, seperti transisi, dapat mengubah elemen halaman dari waktu ke waktu. Dalam membuat dan membentuk konsep Animasi yang lebih kuat dan lebih kompleks, Anda perlu mendeklarasikan animasi dengan sintaks khusus sebelum Anda dapat menggunakannya, dan menentukan nilai untuk beberapa properti pada persentase yang berbeda dari awal sampai akhir animasi selesai (keyframes). Kemudian ketika Anda akan menggunakan dan menampilkannya, ada banyak nilai-nilai yang dapat Anda tentukan untuk tampilan konsep animasi Anda. Sehingga dengan semua itu, maka disana akan banyak terdapat bentuk animasi yang menarik untuk di saksikan.
Pelajari lebih lanjut pada LINK-SUMBER di bawah ini:
No comments:
Post a Comment