CSS3: Animation (Hoạt ảnh)

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

CSS3 cho phép bạn thiết lập các hoạt ảnh có thể thay thế cho ảnh động, hoạt ảnh bằng Flash, hoạt ảnh bằng code JavaScript hay jQuery trong các trang web của website.

Quy tắc @keyframes

Để tạo hoạt ảnh bằng CSS3 bạn cần phải nắm được quy tắc @keyframes bởi đây chính là nơi bạn đặt code CSS để tạo ra hoạt ảnh.

Trình duyệt hỗ trợ

Thuộc tính

Trình duyệt hỗ trợ

@keyframes

IE

FF

Chrome

Safary

Opera

animation

IE

FF

Chrome

Safary

Opera

Các trình duyệt Internet Explorer từ phiên bản 10 trở lên, Firefox và Opera hỗ trợ hoàn toàn @keyframes và thuộc tính animation, còn nếu bạn muốn trình duyệt Chrome và Safari hỗ trợ thì bạn phải sử dụng tiền tố -webkit-.

Ví dụ:

@keyframes myfirst{ //Tạo hoạt ảnh có tên myfirst

from {background: red;}  //Hoạt ảnh này sẽ chuyển nền từ màu đỏ

to {background: yellow;} //sang màu vàng

}

@-webkit-keyframes myfirst{ /* Safari và Chrome */

from {background: red;}

to {background: yellow;}

}

Thuộc tính animation trong CSS3

Sau khi tạo được hoạt ảnh trong @keyframe thì bạn cần phải gắn nó với một bộ chọn nào đó để sử dụng. Việc gắn hoạt ảnh cho bộ chọn phải thông qua thuộc tính animation với ít nhất hai giá trị là tên của hoạt ảnh và thời gian thực hiện hoạt ảnh.

Ví dụ sau đây sẽ gắn hoạt ảnh có tên "myfirst" được tạo ra trong ví dụ trên vào phần tử <div> và hoạt ảnh này sẽ thực hiện trong thời gian là 05 giây:

div{

animation: myfirst 5s;

-webkit-animation: myfirst 5s; /* Safari and Chrome */

}

Còn đây là ví dụ hoàn chỉnh:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div{

width:100px;

height:100px;

background:green;

color:white;

text-align:center;

}

div:hover{

animation:myfirst 5s;

-webkit-animation:myfirst 5s;

}

@keyframes myfirst{

from {background:green;}

to {background:yellow;}

}

@-webkit-keyframes myfirst{

from {background:green;}

to {background:yellow; color:green;}

}

</style>

</head>

<body>

<div>Chạm tôi => Tôi sẽ đổi màu trong 5s.</div>

</body>

</html>

Vậy hoạt ảnh trong CSS3 là gì?

Bản chất của hoạt ảnh trong CSS3 là hiệu ứng cho phép một phần tử nào đó dần dần chuyển từ trạng thái này sang trạng thái khác.

Bạn có thể thay đổi nhiều trạng thái cũng như thay đổi trạng thái nhiều lần cho phần tử.

Bạn có thể sử dụng tỷ lệ phần trăm (%) hoặc sử dụng các từ khóa 'from' (0%) và 'to' (100%) để thiết lập việc chuyển đổi trạng thái.

Sau đây là hai ví dụ nữa giúp bạn hiểu rõ hơn về hoạt ảnh trong CSS3.

Ví dụ 1: Ví dụ này thiết lập hoạt ảnh cho phần tử <div> chuyển màu nền từ red sang green trong thời gian 5 giây, trong đó 25% thời gian đầu sẽ chuyển từ red sang yellow, 25% thời gian tiếp theo sẽ chuyển từ yellow sang blue và 50% thời gian cuối cùng sẽ chuyển từ blue sang green.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#div{

width:200px;

height:200px;

background:red;

color:white;

}

#div:hover{

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari và 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>Lưu ý:</b> Sau khi kết thúc hoạt ảnh phần tử lại quay trở lại trạng thái ban đầu.</p>

<div id="div">Chạm tôi => Tôi sẽ chuyển thành nhiều màu trong 5s.</div>

</body>

</html>

Ví dụ 2: Còn đây là ví dụ tạo hoạt ảnh thay đổi màu nền và vị trí của phần tử <div>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#div{

width:100px;

height:100px;

background:red;

position:relative;

color:white;

text-align:center;

}

#div:hover{

animation:myfirst 5s;

-webkit-animation:myfirst 5s; /* Safari và Chrome */

}

@keyframes myfirst{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst{ /* Safari and Chrome */

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div id="div">Chạm tôi => Tôi di chuyển.</div>

</body>

</html>

Các thuộc tính Animation trong CSS3

Dưới đây là danh sách gồm thuộc tính animation và những thuộc tính con của animation:

Thuộc tính

Mô tả

CSS

@keyframes

Định nghĩa hoạt ảnh

3

animation

Thuộc tính tổng hợp của tất cả những thuộc tính con của animation (ngoại trừ thuộc tính con animation-play-state)

3

animation-name

Dùng để xác định tên của @keyframes

3

animation-duration

Dùng để xác định thời gian (tính theo giây hoặc mini giây) diễn ra hoạt ảnh, mặc định là 0.

3

animation-timing-function

Mô tả chu kỳ của một hoạt ảnh, mặc định là "ease".

3

animation-delay

Xác định độ trễ của hoạt ảnh mỗi khi bắt đầu, mặc định là 0.

3

animation-iteration-count

Xác định số lần thực thi hoạt ảnh, mặc định là 1.

3

animation-direction

Xác định hoạt ảnh có được thực thi ngược hay không, mặc định là "normal".

3

animation-play-state

Xác định hoạt ảnh đang được thực thi hay đang tạm dừng, mặc định là "running".

3

Sau đây là hai ví dụ về hai cách sử dụng hoạt ảnh khác nhau:

Ví dụ 1: Ví dụ này sẽ sử dụng từng thuộc tính con của animation để thiết lập hoạt ảnh.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#div{

width:100px;

height:100px;

background:red;

position:relative;

color:white;

text-align:center;

}

#div:hover{

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 và 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:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst{ /* Safari and Chrome */

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div id="div">Chạm tôi => Sau 2s tôi sẽ di chuyển liên tục.</div>

</body>

</html>

Ví dụ 2: Ví dụ này sẽ kết hợp tất cả các giá trị liên quan đến các thuộc tính con của animation.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

#div{

width:100px;

height:100px;

background:red;

position:relative;

color:white;

text-align:center;

}

#div:hover{

animation: myfirst 2s linear 2s infinite alternate;

/* Safari và Chrome: */

-webkit-animation: myfirst 2s linear 2s infinite alternate;

}

@keyframes myfirst{

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

@-webkit-keyframes myfirst{ /* Safari and Chrome */

0% {background:red; left:0px; top:0px;}

25% {background:yellow; left:50%; top:0px;}

50% {background:blue; left:50%; top:400px;}

75% {background:green; left:0px; top:400px;}

100% {background:red; left:0px; top:0px;}

}

</style>

</head>

<body>

<div id="div">Chạm tôi => Sau 2s tôi sẽ di chuyển liên tục.</div>

</body>

</html>

» Tiếp: Các thuộc tính áp dụng được hiệu ứng hoạt họa (animation) hoặc transition
« Trước: transform 3D
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!