<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"> <defs> <style> #myRect { animation-duration: 0.1s; animation-name: fade; animation-fill-mode: forwards; } @keyframes fade { 0% { fill-opacity: 0 } 100% { fill-opacity: 1 } } </style> </defs> <rect width="100%" height="100%" fill="red"/> <rect id="myRect" width="100%" height="100%" fill="lime" fill-opacity="0"/> </svg>