Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } #animation1 { height: 120px; width: 120px; background: #5bd97d; opacity: 0; -webkit-animation: fadein 1s ease-in alternate; -moz-animation: fadein 1s ease-in alternate; animation: fadein 1s ease-in alternate; animation-delay: 1s; animation-fill-mode: forwards; } </style> </head> <body> <div id="animation1"></div> </body> </html>