Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ background-color:green; width:50px; height:50px; position:relative; animation-name:move,reSize,bgColor; animation-duration:3s; animation-iteration-count:infinite; } @keyframes move{ from{left:0px;} to{left:500px;} } @keyframes reSize{ from{width:50px;height:50px;} to{width:100px;height:100px;} } @keyframes bgColor{ from{background-color:green;} to{background-color:blue;} } </style> </head> <body> <div id="test"></div> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ background-color:green; width:50px; height:50px; position:relative; animation-name:move,reSize,bgColor; animation-duration:3s; animation-iteration-count:infinite; } @keyframes move{ from{left:0px;} to{left:500px;} } @keyframes reSize{ from{width:50px;height:50px;} to{width:100px;height:100px;} } @keyframes bgColor{ from{background-color:green;} to{background-color:blue;} } </style> </head> <body> <div id="test"></div> </body> </html>