Tự code rồi chạy thử... Chạy Thử

<!DOCTYPE html>
<html>
<head>
<title>Chạy thử Css animation phần trăm (%)</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 6s infinite;
}
@keyframes chayngang{
   0% {top:0px;left:0px}
   50% {top:0px;left:200px}
   75% {top:200px;left:200px}
   100% {top:200px;left:0px}
}

</style>
</head>
<body>

<h1>Chạy thử Css animation phần trăm (%)</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 cho thời gian chạy là 2 giây và chạy liên tục, lúc 0% là ở vị trí xuất phát, lúc 50% sẽ cách top 0px, cách left 200px, lúc 75% cách top 200px cách left 200px, lúc 100% các top 200px cách left 0px, chạy theo hình vuông:</p>

<span>animation</span>

</body>
</html>

Chạy thử Css animation phần trăm (%) nằm trong bài viết Thuộc tính animation trong CSS