Previous Lesson Next Lesson

Thuộc tính animation trong CSS3

Thuộc tính animation trong css 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.

Thuộc tính của animation trong css3:

Thuộc tính	giá trị	Ví dụ	Mô tả
animation-name	tên animation	animation-name: myAnimation;	Xác định tên cho một animation.
animation-duration	thời gian	animation-duration: 5s;	Xác định thời gian để hoàn thành một chuyển động, mặc định là 0s.
animation-timing-function	linear	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.
	ease	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.
	ease-in	animation-timing-function: ease-in;	Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.
	ease-out	animation-timing-function: ease-out;	Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.
	ease-in-out	animation-timing-function: ease-in-out;	Chuyển động ban đầu chậm, sau đó nhanh, đến lúc kết thúc sẽ chậm dần.
	cubic-bezier(n,n,n,n)	animation-timing-function: cubic-bezier(1,1,1,0);	Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.
animation-delay	thời gian	animation-delay: 3s;	Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định sẽ là 0
animation-iteration-count	số tự nhiên	animation-iteration-count: 4;	Xác định số lần thực hiện chuyển động.
animation-iteration-count	infinite	animation-iteration-count: infinite;	Chuyển động sẽ thực hiện không giới hạn số lần.
animation-direction	normal	animation-direction: normal;	Chuyển động bình thường, đây là dạng mặc định.
animation-direction	alternate	animation-direction: alternate;	Chuyển động sẽ được đảo ngược ở chu kỳ tiếp theo.
animation-play-state	paused	animation-play-state: paused;	Xác định chuyển động dừng lại.
animation-play-state	running	animation-play-state: running;	Xác định chuyển động chạy.
animation	[name] [duration] [timing] [delay] [interaction-count] [direction]	animation: myAnimation 5s linear 3s infinite alternate;	Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính animation-play-state.

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p class="panimation">Animation</p>
</body>
</html>

CSS viết:

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
}

Hiển thị trình duyệt khi chưa có CSS:

Animation

CSS viết:

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

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

/* Hien thi cho Firefox */
@-moz-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Safari and Chrome */
@-webkit-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

/* Hien thi cho Opera */
@-o-keyframes myAnimation {
    from {left: 0px;}
    to {left: 200px;}
}

Hiển thị trình duyệt khi có CSS:

Animation