lime-css-anim-100x100.svg

Enable keyboard shortcuts

Checkerboard

<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>