Sử dụng CSS3 - animation
Sử dụng thuộc tính animation với CSS3 là một điều thú vị trong thiết kế web. Tạo cho trang web bạn thêm chuyên nghiệp. Hãy cùng trãi nghiệm nhé.
Các thuộc tính cần biết:
Cấu trúc:
animation: [tên] [thời gian chạy] [chức năng thời gian] [độ trế] [số lần tương tác];
| Value | Description |
|---|---|
| animation-name | Xác định tên của chức năng, chứa các thuộc tính cho animation |
| animation-duration | Xác định thời gian chạy của một animatiom |
| animation-timing-function | Xác định tốc độ chạy của animation |
| animation-delay | Xác định độ trễ |
| animation-iteration-count | Xác định số lần lặp lại. |
| animation-direction | Xác định vị trí mà animation sẽ chạy. |
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>Note:</strong> The animation property is not supported in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
Kết quả:
Note: The animation property is not supported in Internet Explorer 9 and earlier versions.
Hay thì like mình nhé! Thiết kế webside giá rẻ
Không có nhận xét nào:
Đăng nhận xét