Animasi CSS 3
adalah cara yang bagus untuk membuat animasi, kita dapat mengganti animasi flash, gambar animasi dan JavaScript dengan CSS3 Animation properti.
Dalam CSS3 Animation Tutorial saya akan menjelaskan cara membuat Walking Man Animation Efek Menggunakan CSS3 saja seperti yang diperlihatkan di bawah ini.
Tutorial CSS3 Animation Tutorial
Pada akhir posting ini akan memahami berikut CSS3 Animation Properties.
- CSS3 KeyFrame Animation : properti yang memungkinkan kita untuk membuat animasi.
- CSS3 Transform : properti yang memungkinkan kita untuk memutar, skala, miring, memindahkan elemen.
- CSS3 Transform Asal: properti yang menetapkan asal transformasi
Pertama kita akan menciptakan manusia statis di sini adalah kode contoh HTML
<div id='WalkingMan'>
<div class='ManBody'>
<div class='body'>
class='Manhead'>
class='Middlepart'>
class='Lhand'>
class='Rhand'>
</div>
class='LLeg'>
class='RLeg'>
</div>
</div>
Kita bagi manusia menjadi dua bagian
- Man Tubuh yang berisi Head, dada dan tangan.
- Kaki Manusia
Sekarang kita akan menerapkan CSS
.ManHead{
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
}
.MiddlePart
{
background: #000;
height: 40px;
width: 10px;
border-radius: 100%;
-webkit-transform: scale(2.2,1.3) skewY(-30deg);
}
.LHand,.RHand,LHand,RHand
{
height: 50px;
width: 5px;
background: #000;
}
Kode CSS lurus ke depan kecuali mengubah properti (Untuk Bagian Tengah)
- Properti Skew ternyata elemen pada sudut tertentu, tergantung pada parameter X atau Y axis
1
-webkit-transform: skew(30deg,20deg);
Dalam contoh kita saya menggunakan skewY yang mengubah elemen vertikal (Y-axis) -30 deg.
- Dan properti skala meningkat atau mengurangi ukuran elemen, tergantung pada parameter yang diberikan untuk lebar (X-axis) dan tinggi (Y-axis)
Kode di atas menciptakan bagian tubuh sampel seperti yang ditunjukkan di bawah ini
Tutorial CSS3 Animation
Sekarang kita harus menyelaraskan semua bagian tubuh ini untuk menciptakan manusia
Terapkan mengikuti Kode CSS.
#WalkingMan {
background: #FFF;
width: 700px;
height: 150px;
margin: 50px auto;
text-align: center;
}
.body {
float:left;
position: absolute;
}
.Manhead {
width: 20px;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
margin-top: 15px;
margin-left: 0px;
}
.Middlepart {
background: #000;
height: 40px;
width: 10px;
position: absolute;
margin-top: 38px;
margin-left: -5px;
border-radius: 100%;
-webkit-transform: scale(2.2,1.3) skewY(-30deg);
}
.Lhand, .Rhand {
margin-top: 38px;
margin-left: -5px;
height: 50px;
width: 5px;
background: #000;
float:left;
}
.LLeg, .RLeg {
margin-top: 80px;
margin-left: -5px;
height: 50px;
width: 5px;
background: #000;
float:left;
}
.ManBody
{
margin-left: 350px;
}
Ini akan membuat Man statis seperti yang ditunjukkan di bawah ini.
CSS3 Animation Tutorial
Sekarang kita menerapkan CSS3 KeyFrame aturan properti untuk memindahkan orang ini.
Apa CSS3 KeyFrame aturan?
Properti ini memungkinkan kita untuk Membuat Animasi Menggunakan CSS3. Properti keyframe mendukung semua browser utama (IE 10 +) dan untuk safari chrome kita harus awalan mesin browser yang sesuai
Untuk membuat Animasi ikuti dua langkah di bawah ini
- Pertama Tentukan gaya CSS dalam @ keyframetag
- Sekarang menerapkan aturan ke elemen menggunakan properti animasi.
Amati di bawah sampel CSS3 KeyFrame Animation Contoh yang berubah warna menjadi merah div kuning untuk setiap 5 detik
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
-webkit-animation:myfirst 5s alternate infinite ease-out;
}
@-webkit-keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Kami mendefinisikan @ keyframe dengan nama "Myfirst" Kami berubah dari merah ke yellow.And menerapkan properti animasi pada div dengan durasi. Anda harus menentukan durasi efek sebaliknya wont animasi karena nilai default adalah '0 '
Kita dapat menggunakan kata kunci seperti " dari "dan" untuk "untuk mengubah gaya atau kita dapat menentukan perubahan dalam persen 0% berarti" pertama "dan 100% berarti" "
0% adalah awal dari animasi dan 100% adalah ketika animasi selesai. Kunjungi W3Schools untuk lebih jelasnya.
Sekarang datang ke kami CSS3 Animation Demo
Saya membagi animasi menjadi dua bagian
- Pindah tangan dan Kaki
- Pindah Seluruh Tubuh
Untuk Pindah Tangan Terapkan CSS Mengikuti
.Lhand, .RLeg {
-webkit-transform-origin: 0 0;
-webkit-animation: movement1 0.5s alternate infinite ease-out;
}
.Rhand, .LLeg {
-webkit-transform-origin: 0 0;
-webkit-animation: movement2 0.5s alternate infinite ease-in;
}
/* for movement 1 */
@-webkit-keyframes movement1
{
from {
-webkit-transform:rotate(-30deg);
}
to {
-webkit-transform:rotate(30deg);
}
}
/* for movement 2 */
@-webkit-keyframes movement2
{
from {
-webkit-transform:rotate(30deg);
}
to {
-webkit-transform:rotate(-30deg);
}
}
Kaki tangan dan kiri kanan harus tenggelam satu sama lain sehingga diterapkan sama CSS3 Animasi Efek untuk kedua elemen dan sebaliknya.
Untuk menggerakkan tangan saya menggunakan CSS3 transform rotate properti dari 30 derajat sampai -30 derajat.
Dan saya menerapkan CSS3 mengubah-asal properti sebagai 0% (x-axis) 0% (Y-axis) yang menentukan bahwa sehubungan dengan posisi elemen mulai kita harus menerapkan transformasi.
yaitu, kita harus memutar kaki atau tangan pada sudut 30 derajat dengan elemen menghormati posisi awal. (Hapus properti ini dalam demo contoh dan memeriksa animasi Anda akan memahami dengan cara yang lebih baik).
Dan tak terbatas berarti kita harus terus-menerus menerapkan animasi.
Berikut adalah Animation CSS3.
Animasi Menggunakan CSS3
Hanya Kaki dan Tangan bergerak ritus. Sekarang kita harus memindahkan seluruh tubuh untuk tujuan saya diterapkan mengikuti animasi untuk manBody
.ManBody {
margin-left:350px;
-webkit-animation: ManBody 9s infinite ease-in;
}
@-webkit-keyframes ManBody
{
from {margin-left:30px;}
to {margin-left:600px;}
}
Logika lurus ke depan hanya kita harus menerapkan gaya 30px margin-left untuk 600px untuk setiap 9 detik.
Berikut adalah Demo akhir untuk Walking Man Efek Animasi Menggunakan CSS3 .
CATATAN: di unduh lalu ektraks kemudian klik aja file index.html
Comments
Post a Comment