[if lt IE 9]>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hangge.com</title> </head> <style> body { padding: 20px; } #block { width: 100px; height: 100px; animation: yellow-orange 2s infinite; } @keyframes yellow-orange { 0% { background: yellow; } 50% { background: orange; } 100% { background: yellow; } } </style> <body> <div id="block"></div> </body> </html>
#block { width: 100px; height: 100px; animation: yellow-orange 1s infinite alternate; } @keyframes yellow-orange { 0% { background: yellow; } 100% { background: orange; } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>hangge.com</title> </head> <style> body { padding: 20px; } #block { width: 100px; height: 100px; animation: yellow-twinkle 1s infinite alternate; } @keyframes yellow-twinkle{ 0% { background: rgba(255,255,0,0); } 100% { background: rgba(255,255,0,1); } } </style> <body> <div id="block"></div> </body> </html>