Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> p{ background-color:green; width:50px; height:50px; position:relative; left:0px; animation-name:move_right; animation-duration:5s; animation-iteration-count:infinite; } @keyframes move_right{ from{left:0px;} to{left:500px;} } </style> </head> <body> <div style="border-right:1px solid black;width:550px;"> <p style="animation-timing-function:linear;"></p> <p style="animation-timing-function:ease;"></p> <p style="animation-timing-function:ease-in;"></p> <p style="animation-timing-function:ease-out;"></p> <p style="animation-timing-function:ease-in-out;"></p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> p{ background-color:green; width:50px; height:50px; position:relative; left:0px; animation-name:move_right; animation-duration:5s; animation-iteration-count:infinite; } @keyframes move_right{ from{left:0px;} to{left:500px;} } </style> </head> <body> <div style="border-right:1px solid black;width:550px;"> <p style="animation-timing-function:linear;"></p> <p style="animation-timing-function:ease;"></p> <p style="animation-timing-function:ease-in;"></p> <p style="animation-timing-function:ease-out;"></p> <p style="animation-timing-function:ease-in-out;"></p> </div> </body> </html>