Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ background-color:green; width:100px; height:100px; position:relative; left:0px; animation-name:move_right; animation-duration:4s; animation-iteration-count:3; } @keyframes move_right{ 0%{left:0px;} 100%{left:500px;} } </style> </head> <body> <p>- Hiệu ứng chuyển động được lặp lại 3 lần.</p> <div id="test"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ background-color:green; width:100px; height:100px; position:relative; left:0px; animation-name:move_right; animation-duration:4s; animation-iteration-count:3; } @keyframes move_right{ 0%{left:0px;} 100%{left:500px;} } </style> </head> <body> <p>- Hiệu ứng chuyển động được lặp lại 3 lần.</p> <div id="test"></div> </body> </html>