css_animate_fill_stroke_opacity.svg

Enable keyboard shortcuts

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">

  <style>

    @keyframes opacity {

    0% {fill-opacity: 0; stroke-opacity: 0;}

    100% {fill-opacity: 1; stroke-opacity: 1;}

  rect {

  animation-duration: 1s;

  animation-name: opacity;

  animation-iteration-count: 1;

  </style>

  <rect width="100" height="100" fill="green" stroke="black" stroke-width="6"/>

</svg>