Ví dụ về thuộc tính animation

Thuộc tính animation-name

Thuộc tính animation-name: Xác định tên cho một animation.

HTML viết:

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

CSS viết:

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

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

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

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

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

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

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ả.

Animation

Thuộc tính animation-duration

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.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: linear;

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.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: ease;

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.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: ease-in;

Thuộc tính animation-timing-function: ease-in; : Chuyển động ban đầu sẽ chậm, sau đó nhanh dần.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: ease-out;

Thuộc tính animation-timing-function: ease-out; : Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: ease-in-out;

Thuộc tính animation-timing-function: ease-in-out; : Chuyển động ban đầu sẽ nhanh, sau đó sẽ chậm dần.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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-out;
    -moz-animation: myAnimation 5s;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation: myAnimation 5s;
    -webkit-animation-timing-function: ease-in-out;
    -o-animation: myAnimation 5s;
    -o-animation-timing-function: ease-in-out;
}

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

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

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

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

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

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ả.

Animation

Thuộc tính animation-timing-function: cubic-bezier(n,n,n,n)

Thuộc tính animation-timing-function: cubic-bezier(n,n,n,n) : Xác định giá trị riêng cho chuyển động, giá trị sẽ từ 0 tới 1.

HTML viết:

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

CSS viết:

p {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: myAnimation 5s;
    animation-timing-function: cubic-bezier(0,0.5,1,0.35);
    -moz-animation: myAnimation 5s;
    -moz-animation-timing-function: cubic-bezier(0,0.5,1,0.35);
    -webkit-animation: myAnimation 5s;
    -webkit-animation-timing-function: cubic-bezier(0,0.5,1,0.35);
    -o-animation: myAnimation 5s;
    -o-animation-timing-function: cubic-bezier(0,0.5,1,0.35);
}

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

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

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

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

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

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ả.

Animation

Thuộc tính animation-delay

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.

HTML viết:

<html>
<head></head>
<body>
<p>Animation</p>
</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;}
}

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

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

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

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

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ả.

Animation

Thuộc tính animation-iteration-count: n;

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>
<p>Animation</p>
</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;}
}

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

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

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

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

Animation

Thuộc tính animation-iteration-count: infinite;

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>
<p>Animation</p>
</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;}
}

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

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

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

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

Animation

Thuộc tính animation-direction;

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>
<p>Animation</p>
</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;}
}

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

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

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

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

Animation

Thuộc tính animation

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>
<p id="aminate">Animation</p>
<p><a href="javascript:;" onclick="pause()">Paused</a> | <a href="javascript:;" onclick="run()">Running</a></p>
</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;}
}

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

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

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

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

Animation

Paused | Running

Thuộc tính animation

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>
<p>Animation</p>
</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;}
}

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

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

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

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

Animation