Chạy thử Css animation from to

Chạy thử Css animation from to

Chạy thử Css animation from to

Tự code rồi chạy thử... Chạy Thử 
<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css animation from to</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
span {
    border: 1px solid red;
    text-align: center;
    width: 100px;
    position: relative;
    animation: chayngang 3s infinite;
    
}
@keyframes chayngang{
    from {left: 0px;}
    to {left: 200px;}
}

</style>
</head>
<body>

<h1>Chạy thử Css animation from to</h1>

<p>Thuộc tính animation trong CSS dùng để tạo hiệu ứng chuyển động vị trí, trạng thái css cho các phần tử HTML bằng cách dùng animation để quản lý thời lượng, tốc độ, độ trễ và hướng lặp và dùng @keyframes để định nghĩa các trạng thái css:</p>

<p>Ở ví dụ này mình đặt tên animation là chạy ngang, thời gian chạy mỗi lần là 1 giây, số lần chạy là không giới hạn số lần chạy, hàm chạy ngang sẽ chạy từ left 0px đến left 200px:</p>

<span>animation</span>

</body>
</html>
Chạy thử Css animation from to nằm trong bài viết Thuộc tính animation trong CSS