Thời gian vừa qua chắc hẳn các bạn đã nghe nhiều về game Flappy Bird trên di động làm mưa làm gió trên toàn thế giới, do lập trình viên Nguyễn Hà Đông thực hiện, và hình ảnh chú chim mỏ đỏ chắc đã “ám ảnh” các bạn trong suốt những ngày qua. Trong bài viết hôm nay, mình sẽ hướng dẫn các bạn làm thế nào để có một vật thể bay khắp trang web với CSS3 (mình đem con flappy bird ra làm ví dụ để giúp các bạn “ám ảnh” hơn nữa thôi).
Demo
Đang bay ở trên
Flappy Bird gif
HTML
<div class="flappybird"></div>
CSS
.flappybird {
background:url('http://www.lamweb.com/wp-content/uploads/2014/02/flappy-bird.gif') no-repeat;
background-position: 0 0;
width:85px;
height:60px;
opacity:0;
right:0;
top:150px;
position:absolute;
z-index:100;
-webkit-animation: flappybirdAnimation infinite 20000ms linear 2s;
-moz-animation: flappybirdAnimation infinite 20000ms linear 2s;
-ms-animation: flappybirdAnimation infinite 20000ms linear 2s;
-o-animation: flappybirdAnimation infinite 20000ms linear 2s;
}
@-moz-keyframes flappybirdAnimation{
from {
background-position:-85px 0;
-webkit-transform: translate(700px, -60px) rotate(-37deg);
opacity:1;
}
17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
to {
background-position:0 0;
-webkit-transform: translate(700px, 369px) rotate(37deg);
opacity:1;
}
}
@-webkit-keyframes flappybirdAnimation{
from {
background-position:-85px 0;
-webkit-transform: translate(700px, -60px) rotate(-37deg);
opacity:1;
}
17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
to {
background-position:0 0;
-webkit-transform: translate(700px, 369px) rotate(37deg);
opacity:1;
}
}
@-ms-keyframes flappybirdAnimation{
from {
background-position:-85px 0;
-webkit-transform: translate(700px, -60px) rotate(-37deg);
opacity:1;
}
17.5% { -webkit-transform:translate(-214px, 266px) rotate(-35deg);}
20% { -webkit-transform: translate(-324px, 298px) rotate(-26deg);}
22.5% { -webkit-transform: translate(-437px, 318px) rotate(-20deg);}
25% { -webkit-transform: translate(-560px, 325px) rotate(-16deg);}
27.5% { -webkit-transform: translate(-686px, 318px) rotate(-10deg);}
30% { -webkit-transform: translate(-811px, 289px) rotate(3deg);}
50% { -webkit-transform: translate(-1700px, -60px) rotate(3deg); background-position:-85px 0; }
51% { -webkit-transform: translate(-1700px, 369px) rotate(3deg); background-position:0 0; }
71% { -webkit-transform: translate(-811px, 59px) rotate(3deg); }
73.5% { -webkit-transform: translate(-686px, 28px) rotate(6deg); }
76% { -webkit-transform: translate(-560px, 15px) rotate(12deg); }
78.5% { -webkit-transform: translate(-437px, 21px) rotate(15deg); }
81% { -webkit-transform: translate(-324px, 48px) rotate(21deg); }
83.3% { -webkit-transform:translate(-214px, 86px) rotate(27deg); }
to {
background-position:0 0;
-webkit-transform: translate(700px, 369px) rotate(37deg);
opacity:1;
}
}
Animation trong CSS3
Để tạo ra các animation trong CSS3, bạn sẽ phải hiểu về quy tắc @keyframes.
Quy tắc @keyframes là nơi mà animation được tạo ra. Chỉ định một style CSS bên trong quy tắc @keyframes và animation sẽ dần thay đổi từ style hiện tại sang style mới.
Một animation là một hiệu ứng cho phép một yếu tố dần dần thay đổi từ một style này qua một style khác. Bạn có thể thay đổi nhiều thành nhiều style mà bạn muốn.
Xác định khi nào thì sự thay đổi sẽ xảy ra theo phần trăm ( % ), hoặc các từ khóa “from” và “to”, nó cũng giống như 0% và 100% vậy.
0% là lúc bắt đầu của animation, 100% là khi animation hoàn tất. Để các trình duyệt hỗ trợ tốt nhất, bạn nên luôn định nghĩa cả 0% và 100%.
Theo ví dụ trên, animation flappybirdAnimation được tạo ra và có sự thay đổi từ 0% (from) đến 100% (to).
Khi các animation được tạo ra trong @keyframes, bạn cần phải gọi nó trong selector, nếu không các animation sẽ không có hiệu lực.
Ví dụ:
-webkit-animation: flappybirdAnimation infinite 15000ms linear 3s;
-moz-animation: flappybirdAnimation infinite 15000ms linear 3s;
-ms-animation: flappybirdAnimation infinite 15000ms linear 3s;
-o-animation: flappybirdAnimation infinite 15000ms linear 3s;
Hỗ Trợ Trình Duyệt
Internet Explorer 10, Firefox, and Opera hỗ trợ quy tắc @keyframes và các animation property.
Chrome and Safari yêu cầu prefix -webkit-.
Lưu ý: Internet Explorer 9 và các phiên bản trước đó không hỗ trợ @keyframes hoặc animation property.
