Thứ Hai, 30 tháng 12, 2013
CSS3 Animations
CSS3 Ảnh động
Với CSS3, chúng ta có thể tạo ra hình ảnh động, có thể thay thế hình ảnh hoạt hình, hình động Flash, và JavaScripts trang web hiện có.
CSS3hoạt hình
CSS3 @ keyframe Rule
Để tạo ra hình ảnh động trong CSS3, bạn sẽ phải tìm hiểu về các quy tắc @ keyframe.
Quy tắc @ khung hình là nơi mà các hình ảnh động được tạo ra. Chỉ định một phong cách CSS bên trong quy tắc @ khung hình và các hình ảnh động sẽ dần dần thay đổi từ phong cách hiện với phong cách mới.
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| @ Keyframe | |||||
| hoạt hình | |||||
Internet Explorer 10, Firefox, và Opera hỗ trợ quy tắc @ khung hình và tài sản hình ảnh động.
Chrome và Safari đòi hỏi các tiền tố-webkit-.
Lưu ý: Internet Explorer 9, và các phiên bản trước đó, không hỗ trợ @ keyframe quy tắc hoặc tài sản hình ảnh động.
Ví dụ
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
{
from {background: red;}
to {background: yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
CSS3 hoạt hình
Khi các hình ảnh động được tạo ra trong @ keyframe, gắn nó vào một chọn, nếu không các hình ảnh động sẽ không có hiệu lực.
Liên kết các hình ảnh động để một chọn bằng cách xác định ít nhất hai thuộc tính CSS3 hoạt hình:
- Chỉ định tên của các hình ảnh động
- Xác định thời gian của các hình ảnh động
Ví dụ
Ràng buộc "myfirst" hình ảnh động để một div yếu tố, thời gian: 5 giây:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Thử nó cho mình »
Lưu ý: Bạn phải xác định tên và thời gian của các hình ảnh động. Nếu thời gian là bỏ qua, các hình ảnh động sẽ không chạy, bởi vì giá trị mặc định là 0.
Ảnh động trong CSS3 là gì?
Một hình ảnh động là một hiệu ứng cho phép một yếu tố dần dần thay đổi từ một phong cách khác.
Bạn có thể thay đổi như nhiều phong cách bạn muốn, nhiều lần bạn muốn.
Xác định khi nào sự thay đổi sẽ xảy ra theo phần trăm, hoặc các từ khoá "từ" và "đến", mà là giống như 0% và 100%.
0% là sự khởi đầu của các hình ảnh động, 100% là khi các hình ảnh động hoàn tất.
Đối với hỗ trợ trình duyệt tốt nhất, bạn nên luôn luôn xác định cả 0% và 100% bộ chọn.
Ví dụ
Thay đổi màu nền khi các hình ảnh động là 25%, 50%, và một lần nữa khi các hình ảnh động là hoàn thành 100%:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
<div></div>
</body>
</html>
Thử nó cho mình »
Ví dụ
Thay đổi màu nền và vị trí:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Thử nó cho mình »
Thuộc tính CSS3 hoạt hình
Hai ví dụ dưới đây trình bày tất cả các thuộc tính hình ảnh động:
Ví dụ
Chạy một hình ảnh động được gọi là myfirst, với tất cả các thuộc tính hoạt hình thiết lập:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:myfirst;
animation-duration:5s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Thử nó cho mình »
Ví dụ
Các hình ảnh động tương tự như trên, sử dụng tài sản hình ảnh động viết tắt:
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation:myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét