HTML CSS examples for CSS Animatable Property:background
CSS animation, fade in background on hover
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> div {<!-- w w w .ja v a2s . co m--> width: 100px; height: 100px; background: rgba(50, 60, 95, 1); transition: background 300ms; animation-name: fadeItOut; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; } div:hover { animation-name: fadeItIn; animation-duration: 1s; animation-delay: 0s; animation-fill-mode: forwards; } @keyframes fadeItIn { 0% { background: rgba(50, 60, 95, 1); } 100% { background: rgba(50, 60, 95, 0.3); } } @keyframes fadeItOut { 0% { background: rgba(50, 60, 95, 0.3); } 100% { background: rgba(50, 60, 95, 1); } } </style> </head> <body> <div> </div> </body> </html>