SVG CSS Animation

Embedding CSS keyframe a animation in SVG file.

by the_voder

HTML

<!--
Test of embedded CSS animation in SVG.
This is now the preferred way of animating SVG elements.

Animation can be embedded in standalone SVG file.
Works when using SVG as src of img tag in most modern browsers.

Animation may not work when image used as background-image.
-->


<h2>CSS Keyframe Animation on SVG Element</h2>

<!-- INLINE ANIMATION ATTACHED TO SVG ELEMENTS -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 548.76 455.46">
  <defs>
    <clipPath id="clip-path" transform="translate(-18.28 -10.47)">
      <path id="Eyelid_Mask" data-name="Eyelid Mask" d="M192,14.6H69.53A43.47,43.47,0,0,0,26.11,58v3.81a43.46,43.46,0,0,0,43.42,43.41H192a43.46,43.46,0,0,0,43.42-43.41V58A43.47,43.47,0,0,0,192,14.6Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(-18.28 -10.47)">
      <path d="M192,14H69.53A43.47,43.47,0,0,0,26.11,57.41v3.81a43.46,43.46,0,0,0,43.42,43.41H192a43.46,43.46,0,0,0,43.42-43.41V57.41A43.47,43.47,0,0,0,192,14Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-3" transform="translate(-18.28 -10.47)">
      <path id="Eyelid_Mask-2" data-name="Eyelid Mask" d="M513,14.6H390.53A43.47,43.47,0,0,0,347.11,58v3.81a43.46,43.46,0,0,0,43.42,43.41H513a43.46,43.46,0,0,0,43.42-43.41V58A43.47,43.47,0,0,0,513,14.6Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-4" transform="translate(-18.28 -10.47)">
      <path d="M513,14H390.53a43.47,43.47,0,0,0-43.42,43.42v3.81a43.46,43.46,0,0,0,43.42,43.41H513a43.46,43.46,0,0,0,43.42-43.41V57.41A43.47,43.47,0,0,0,513,14Z" fill="none"/>
    </clipPath>
    <style>
        /* Apply Animation to both eyelid elements */
        #Eyelid-2,
        #Eyelid-4 {
            animation: blink_anim 5s ease-in-out infinite;
        }

        /* Animation keyframes */
        @keyframes blink_anim {
          0% { transform: scaleY(0); }
          94% { transform: scaleY(0); }
          96% { transform: scaleY(1.0); }
         ...

CSS

svg {
    margin: 20px auto 20px auto;
}