読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

今日のCSSアニメーション その6

CSS

SVGをアニメーションさせてみました。


DEMO

See the Pen HELLO WORLD. by kimmy (@kimmy) on CodePen.


HTML
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
   y="0px" viewBox="0 0 260 40" enable-background="new 0 0 260 40" xml:space="preserve">
<g>
  <rect fill="none" width="260" height="40"/>
  <path fill="none" stroke="#000000" d="M30.7,25.6v-8.9h-8.3v8.9h-5.1V4.4h5.1v8h8.3v-8h5.1v21.2H30.7z"/>
  <path fill="none" stroke="#000000" d="M40.2,25.6V4.4h14.3v4.3h-9.3v4h8.8v4.1h-8.8v4.4H55v4.4H40.2z"/>
  <path fill="none" stroke="#000000" d="M58.4,25.6V4.4h5.2v16.8h8.2v4.5H58.4z"/>
  <path fill="none" stroke="#000000" d="M74.2,25.6V4.4h5.2v16.8h8.2v4.5H74.2z"/>
  <path fill="none" stroke="#000000" d="M112.1,14.9c0,1.7-0.3,3.2-0.9,4.6c-0.6,1.4-1.4,2.6-2.4,3.6c-1,1-2.3,1.8-3.7,2.3
    c-1.4,0.5-3,0.8-4.6,0.8c-1.7,0-3.2-0.3-4.6-0.8s-2.6-1.3-3.7-2.3c-1-1-1.8-2.2-2.4-3.6c-0.6-1.4-0.9-2.9-0.9-4.6
    c0-1.7,0.3-3.2,0.9-4.6c0.6-1.4,1.4-2.5,2.4-3.5c1-1,2.2-1.7,3.7-2.2s2.9-0.8,4.6-0.8c1.7,0,3.2,0.3,4.6,0.8
    c1.4,0.5,2.6,1.3,3.7,2.2c1,1,1.8,2.1,2.4,3.5C111.8,11.7,112.1,13.2,112.1,14.9z M106.6,14.9c0-0.9-0.1-1.8-0.4-2.6
    c-0.3-0.8-0.7-1.5-1.2-2.1c-0.5-0.6-1.2-1-1.9-1.3c-0.8-0.3-1.6-0.5-2.5-0.5S98.8,8.6,98,8.9c-0.7,0.3-1.4,0.8-1.9,1.3
    c-0.5,0.6-1,1.3-1.2,2.1c-0.3,0.8-0.4,1.7-0.4,2.6c0,1,0.1,1.8,0.5,2.7c0.3,0.8,0.7,1.5,1.2,2.1c0.5,0.6,1.2,1,1.9,1.4
    c0.7,0.3,1.6,0.5,2.5,0.5s1.7-0.2,2.5-0.5c0.7-0.3,1.4-0.8,1.9-1.4c0.5-0.6,1-1.3,1.3-2.1C106.4,16.8,106.6,15.9,106.6,14.9z"/>
  <path fill="none" stroke="#000000" d="M145.5,25.6h-5.1l-4.2-14.4h-0.1l-4.2,14.4h-5.1l-6-21.2h5.5l3.4,14.1h0.1l3.8-14.1h5.3
    l3.8,14.1h0.1l3.4-14.1h5.3L145.5,25.6z"/>
  <path fill="none" stroke="#000000" d="M175.9,14.9c0,1.7-0.3,3.2-0.9,4.6c-0.6,1.4-1.4,2.6-2.4,3.6s-2.3,1.8-3.7,2.3
    c-1.4,0.5-3,0.8-4.6,0.8s-3.2-0.3-4.6-0.8c-1.4-0.5-2.6-1.3-3.7-2.3c-1-1-1.8-2.2-2.4-3.6c-0.6-1.4-0.9-2.9-0.9-4.6
    c0-1.7,0.3-3.2,0.9-4.6c0.6-1.4,1.4-2.5,2.4-3.5c1-1,2.2-1.7,3.7-2.2c1.4-0.5,2.9-0.8,4.6-0.8s3.2,0.3,4.6,0.8
    c1.4,0.5,2.6,1.3,3.7,2.2s1.8,2.1,2.4,3.5C175.6,11.7,175.9,13.2,175.9,14.9z M170.4,14.9c0-0.9-0.1-1.8-0.5-2.6
    c-0.3-0.8-0.7-1.5-1.2-2.1c-0.5-0.6-1.2-1-1.9-1.3c-0.8-0.3-1.6-0.5-2.5-0.5s-1.7,0.2-2.5,0.5c-0.7,0.3-1.4,0.8-1.9,1.3
    c-0.5,0.6-1,1.3-1.2,2.1c-0.3,0.8-0.4,1.7-0.4,2.6c0,1,0.1,1.8,0.4,2.7c0.3,0.8,0.7,1.5,1.2,2.1c0.5,0.6,1.2,1,1.9,1.4
    c0.7,0.3,1.6,0.5,2.5,0.5s1.7-0.2,2.5-0.5c0.7-0.3,1.4-0.8,1.9-1.4c0.5-0.6,1-1.3,1.3-2.1C170.2,16.8,170.4,15.9,170.4,14.9z"/>
  <path fill="none" stroke="#000000" d="M190.6,25.6l-4.6-8.4h-1.7v8.4h-5V4.4h8.1c1,0,2,0.1,3,0.3c1,0.2,1.8,0.6,2.6,1.1
    s1.4,1.2,1.8,2c0.5,0.8,0.7,1.8,0.7,3.1c0,1.4-0.4,2.6-1.2,3.6s-1.9,1.7-3.2,2.1l5.5,9.1H190.6z M190.4,10.9c0-0.5-0.1-0.9-0.3-1.2
    s-0.5-0.5-0.8-0.7c-0.3-0.2-0.7-0.3-1.1-0.3c-0.4-0.1-0.8-0.1-1.2-0.1h-2.7v5h2.4c0.4,0,0.9,0,1.3-0.1c0.4-0.1,0.8-0.2,1.2-0.4
    c0.4-0.2,0.7-0.4,0.9-0.8C190.3,11.9,190.4,11.4,190.4,10.9z"/>
  <path fill="none" stroke="#000000" d="M199.1,25.6V4.4h5.2v16.8h8.2v4.5H199.1z"/>
  <path fill="none" stroke="#000000" d="M234.7,14.9c0,1.9-0.3,3.5-1,4.8c-0.7,1.4-1.6,2.5-2.7,3.3s-2.4,1.5-3.8,1.9
    c-1.4,0.4-2.9,0.6-4.3,0.6h-7.9V4.4h7.7c1.5,0,3,0.2,4.4,0.5c1.5,0.4,2.8,0.9,3.9,1.7s2.1,1.9,2.8,3.3
    C234.4,11.3,234.7,12.9,234.7,14.9z M229.4,14.9c0-1.2-0.2-2.2-0.6-3c-0.4-0.8-0.9-1.4-1.6-1.9c-0.7-0.5-1.4-0.8-2.2-1
    c-0.8-0.2-1.7-0.3-2.6-0.3h-2.5v12.4h2.4c0.9,0,1.8-0.1,2.7-0.3c0.8-0.2,1.6-0.6,2.2-1c0.6-0.5,1.2-1.1,1.6-1.9
    C229.2,17.1,229.4,16.1,229.4,14.9z"/>
  <path fill="none" stroke="#000000" d="M243.5,23c0,0.8-0.3,1.5-0.9,2.1s-1.3,0.8-2.1,0.8c-0.4,0-0.8-0.1-1.2-0.2
    c-0.4-0.2-0.7-0.4-1-0.6c-0.3-0.3-0.5-0.6-0.7-0.9c-0.2-0.3-0.2-0.7-0.2-1.2c0-0.4,0.1-0.8,0.2-1.1s0.4-0.7,0.7-0.9
    c0.3-0.3,0.6-0.5,1-0.6s0.8-0.2,1.2-0.2c0.8,0,1.5,0.3,2.1,0.8C243.2,21.4,243.5,22.1,243.5,23z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
CSS
svg {
  diaplay: block;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  max-width: 553px; max-height: 85px;
  path {
    stroke-width: 2;
    stroke-dasharray: 5;
    stroke-dashoffset: 500;
    stroke-linecap: round;
    animation: anim 4s ease-in-out infinite;
  }
}

@keyframes anim {
  0% {
    stroke-dashoffset: 500;
  }

  100% {
    stroke-dashoffset: 0;
  }
}