Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction.

Danh ngôn cuộc sống:

• Bài viết được đăng bởi: Mr. Phan Nhan
• Ngày cập nhật bài viết: 13/05/2016
• Tổng lược xem trang: 443 / 1 khách
• Đánh giá bởi người dùng:

Định nghĩa và sử dụng. Thuộc tính animation xác định một chuyển động của một tag hay một hình ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Cấu trúc:

tag {
animation: giá trị;
-moz-animation: giá trị;
-webkit-animation: giá trị;
-o-animation: giá trị;
}

Trong đó:
-moz-animation hỗ trợ cho firefox.
-webkit-animation hỗ trợ cho Google Chrome và Safari.
-o-animation hỗ trợ cho Opera.

1. Thuộc tính animation-duration : Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation;
animation-duration: 10s;
-moz-animation: myAnimation;
-moz-animation-duration: 10s;
-webkit-animation: myAnimation;
-webkit-animation-duration: 10s;
-o-animation: myAnimation;
-o-animation-duration: 10s;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

2. Thuộc tính animation-timing-function: linear; : Chuyển động sẽ cùng tốc độ từ lúc bắt đầu tới lúc kết thúc. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-timing-function: linear;
-moz-animation: myAnimation 5s;
-moz-animation-timing-function: linear;
-webkit-animation: myAnimation 5s;
-webkit-animation-timing-function: linear;
-o-animation: myAnimation 5s;
-o-animation-timing-function: linear;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

3. Thuộc tính animation-timing-function: ease; : Chuyển động ban đầu sẽ chậm, sau đó nhanh, đến lúc kết thúc sẽ từ từ, đây là dạng mặc định. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-timing-function: ease;
-moz-animation: myAnimation 5s;
-moz-animation-timing-function: ease;
-webkit-animation: myAnimation 5s;
-webkit-animation-timing-function: ease;
-o-animation: myAnimation 5s;
-o-animation-timing-function: ease;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

4. Thuộc tính animation-timing-function: ease-in; : Chuyển động ban đầu sẽ chậm, sau đó nhanh dần. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-timing-function: ease-in;
-moz-animation: myAnimation 5s;
-moz-animation-timing-function: ease-in;
-webkit-animation: myAnimation 5s;
-webkit-animation-timing-function: ease-in;
-o-animation: myAnimation 5s;
-o-animation-timing-function: ease-in;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

5. Thuộc tính animation-timing-function: ease-out; : Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-timing-function: ease-out;
-moz-animation: myAnimation 5s;
-moz-animation-timing-function: ease-out;
-webkit-animation: myAnimation 5s;
-webkit-animation-timing-function: ease-out;
-o-animation: myAnimation 5s;
-o-animation-timing-function: ease-out;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

6. Thuộc tính animation-delay : Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0. Vì chuyển động không lặp lại nên bạn cần nhấn F5 (làm mới lại trang) để xem lại kết quả. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-delay: 3s;
-moz-animation: myAnimation 5s;
-moz-animation-delay: 3s;
-webkit-animation: myAnimation 5s;
-webkit-animation-delay: 3s;
-o-animation: myAnimation 5s;
-o-animation-delay: 3s;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

7. Thuộc tính animation-iteration-count: n; : Xác định số lần thực hiện chuyển động. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-iteration-count: 2;
-moz-animation: myAnimation 5s;
-moz-animation-iteration-count: 2;
-webkit-animation: myAnimation 5s;
-webkit-animation-iteration-count: 2;
-o-animation: myAnimation 5s;
-o-animation-iteration-count: 2;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

8. Thuộc tính animation-iteration-count: infinite; : Chuyển động sẽ thực hiện không giới hạn số lần. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s;
animation-iteration-count: infinite;
-moz-animation: myAnimation 5s;
-moz-animation-iteration-count: infinite;
-webkit-animation: myAnimation 5s;
-webkit-animation-iteration-count: infinite;
-o-animation: myAnimation 5s;
-o-animation-iteration-count: infinite;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

9. Thuộc tính animation-direction : Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo hay không. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s infinite;
animation-direction: alternate;
-moz-animation: myAnimation 5s infinite;
-moz-animation-direction: alternate;
-webkit-animation: myAnimation 5s infinite;
-webkit-animation-direction: alternate;
-o-animation: myAnimation 5s infinite;
-o-animation-direction: alternate;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

10. Thuộc tính animation : Đây là dạng tổng hợp của các thuộc tính animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Với cách sử dụng thuộc tính này ta thấy rút gọn được rất nhiều dòng code. HTML viết:

<html>
<head>
<script type="text/javascript">
function run(){
idAmination = document.getElementById("animate");
idAmination.style.webkitAnimationPlayState="running";
idAmination.style.MozAnimationPlayState="running";
idAmination.style.OAnimationPlayState="running";
}

function pause(){
idAmination = document.getElementById("animate");
idAmination.style.webkitAnimationPlayState="paused";
idAmination.style.MozAnimationPlayState="paused";
idAmination.style.OAnimationPlayState="paused";
}
</script>
</head>
<body>
Animation
<a href="javascript:;" onclick="pause()">Paused</a> | <a href="javascript:;" onclick="run()">Running</a>
</body>
</html>

CSS viết:

p#animate {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s ease 3s infinite;
-moz-animation: myAnimation 5s ease 3s infinite;
-webkit-animation: myAnimation 5s ease 3s infinite;
-o-animation: myAnimation 5s ease 3s infinite;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

11. Thuộc tính animation : Đây là dạng tổng hợp của các thuộc tính animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction. Với cách sử dụng thuộc tính này ta thấy rút gọn được rất nhiều dòng code. HTML viết:

<html>
<head></head>
<body>
Animation
</body>
</html>

CSS viết:

p {
border: 1px solid red;
text-align: center;
width: 100px;
position: relative;
animation: myAnimation 5s ease 3s infinite;
-moz-animation: myAnimation 5s ease 3s infinite;
-webkit-animation: myAnimation 5s ease 3s infinite;
-o-animation: myAnimation 5s ease 3s infinite;
}

@keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-moz-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-webkit-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

@-o-keyframes myAnimation {
from {left: 0px;}
to {left: 400px;}
}

Những bài viết được đăng mới nhất.

» Công cụ xóa dấu Tiếng việt