CSSで実装するSVGアイコンアニメーション11選

@ハクト 2023-07-28 11:57:57に投稿

今回はFontAwesomeのSVGアイコンをCSSのアニメーションで動きを入れてます。

主に「transform」プロパティを使用し、拡大や回転、変形、移動させました。

ローディングアニメーションなどにも活用できるので、お気に入りのアニメーションがあればコピペして利用してください

ハートアイコンが鼓動を打つようなアニメーション

keyframeでscale関数を使用し、拡大・縮小する鼓動のようなアニメーションにしてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.loading-area {
    display: flex;
    align-items: center;
    font-size: 2rem;
}

.loading-area svg {
    animation: svg-animation 1s both infinite ease-in;
}

@keyframes svg-animation {

    0%,
    to {
        transform: scale(1, 1)
    }

30% {
    transform: scale(1.3, .80)
}

40% {
    transform: scale(.80, 1.3)
}

50% {
    transform: scale(1.25, .80)
}

65% {
    transform: scale(.9, 1.05)
}

75% {
    transform: scale(1.05, .9)
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

バスケットボールアイコンがバウンドするアニメーション

アニメーションはkeyframeに「translateY」を指定しアイコンをバウンドさせてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M86.6 64l85.2 85.2C194.5 121.7 208 86.4 208 48c0-14.7-2-28.9-5.7-42.4C158.6 15 119 35.5 86.6 64zM64 86.6C35.5 119 15 158.6 5.6 202.3C19.1 206 33.3 208 48 208c38.4 0 73.7-13.5 101.3-36.1L64 86.6zM256 0c-7.3 0-14.6 .3-21.8 .9C238 16 240 31.8 240 48c0 47.3-17.1 90.5-45.4 124L256 233.4 425.4 64C380.2 24.2 320.9 0 256 0zM48 240c-16.2 0-32-2-47.1-5.8C.3 241.4 0 248.7 0 256c0 64.9 24.2 124.2 64 169.4L233.4 256 172 194.6C138.5 222.9 95.3 240 48 240zm463.1 37.8c.6-7.2 .9-14.5 .9-21.8c0-64.9-24.2-124.2-64-169.4L278.6 256 340 317.4c33.4-28.3 76.7-45.4 124-45.4c16.2 0 32 2 47.1 5.8zm-4.7 31.9C492.9 306 478.7 304 464 304c-38.4 0-73.7 13.5-101.3 36.1L448 425.4c28.5-32.3 49.1-71.9 58.4-115.7zM340.1 362.7C317.5 390.3 304 425.6 304 464c0 14.7 2 28.9 5.7 42.4C353.4 497 393 476.5 425.4 448l-85.2-85.2zM317.4 340L256 278.6 86.6 448c45.1 39.8 104.4 64 169.4 64c7.3 0 14.6-.3 21.8-.9C274 496 272 480.2 272 464c0-47.3 17.1-90.5 45.4-124z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    position: relative;
    font-size: 2rem;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

50% {
    transform: translateY(-20px);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

雪のアイコンが点滅するアニメーション

アニメーションはkeyframeに「opacity」を指定し文字を点滅させてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M224 0c17.7 0 32 14.3 32 32V62.1l15-15c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-49 49v70.3l61.4-35.8 17.7-66.1c3.4-12.8 16.6-20.4 29.4-17s20.4 16.6 17 29.4l-5.2 19.3 23.6-13.8c15.3-8.9 34.9-3.7 43.8 11.5s3.8 34.9-11.5 43.8l-25.3 14.8 21.7 5.8c12.8 3.4 20.4 16.6 17 29.4s-16.6 20.4-29.4 17l-67.7-18.1L287.5 256l60.9 35.5 67.7-18.1c12.8-3.4 26 4.2 29.4 17s-4.2 26-17 29.4l-21.7 5.8 25.3 14.8c15.3 8.9 20.4 28.5 11.5 43.8s-28.5 20.4-43.8 11.5l-23.6-13.8 5.2 19.3c3.4 12.8-4.2 26-17 29.4s-26-4.2-29.4-17l-17.7-66.1L256 311.7v70.3l49 49c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-15-15V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V449.9l-15 15c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l49-49V311.7l-61.4 35.8-17.7 66.1c-3.4 12.8-16.6 20.4-29.4 17s-20.4-16.6-17-29.4l5.2-19.3L48.1 395.6c-15.3 8.9-34.9 3.7-43.8-11.5s-3.7-34.9 11.5-43.8l25.3-14.8-21.7-5.8c-12.8-3.4-20.4-16.6-17-29.4s16.6-20.4 29.4-17l67.7 18.1L160.5 256 99.6 220.5 31.9 238.6c-12.8 3.4-26-4.2-29.4-17s4.2-26 17-29.4l21.7-5.8L15.9 171.6C.6 162.7-4.5 143.1 4.4 127.9s28.5-20.4 43.8-11.5l23.6 13.8-5.2-19.3c-3.4-12.8 4.2-26 17-29.4s26 4.2 29.4 17l17.7 66.1L192 200.3V129.9L143 81c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l15 15V32c0-17.7 14.3-32 32-32z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    position: relative;
    font-size: 2rem;
    animation: fade 1.5s ease-in-out infinite;
}

@keyframes fade {

    0%,
    100% {
        opacity: 0;
    }

50% {
    opacity: 1;
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ベルアイコンが左右に震えるアニメーション

アニメーションはkeyframeに「translateX」を指定しアイコンをシェイクさせてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M224 0c-17.7 0-32 14.3-32 32V51.2C119 66 64 130.6 64 208v18.8c0 47-17.3 92.4-48.5 127.6l-7.4 8.3c-8.4 9.4-10.4 22.9-5.3 34.4S19.4 416 32 416H416c12.6 0 24-7.4 29.2-18.9s3.1-25-5.3-34.4l-7.4-8.3C401.3 319.2 384 273.9 384 226.8V208c0-77.4-55-142-128-156.8V32c0-17.7-14.3-32-32-32zm45.3 493.3c12-12 18.7-28.3 18.7-45.3H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    position: relative;
    font-size: 2rem;
    animation: swing 0.2s ease-in-out infinite;
}

@keyframes swing {

    0%,
    100% {
        transform: translateX(0);
    }

50% {
    transform: translateX(3px);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

木のアイコンが拡大縮小するアニメーション

アニメーションはkeyframeに「scale」を指定しアイコンを拡大・縮小させてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M210.6 5.9L62 169.4c-3.9 4.2-6 9.8-6 15.5C56 197.7 66.3 208 79.1 208H104L30.6 281.4c-4.2 4.2-6.6 10-6.6 16C24 309.9 34.1 320 46.6 320H80L5.4 409.5C1.9 413.7 0 419 0 424.5c0 13 10.5 23.5 23.5 23.5H192v32c0 17.7 14.3 32 32 32s32-14.3 32-32V448H424.5c13 0 23.5-10.5 23.5-23.5c0-5.5-1.9-10.8-5.4-15L368 320h33.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L344 208h24.9c12.7 0 23.1-10.3 23.1-23.1c0-5.7-2.1-11.3-6-15.5L237.4 5.9C234 2.1 229.1 0 224 0s-10 2.1-13.4 5.9z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    position: relative;
    font-size: 2rem;
    animation: scale 2s ease-in-out infinite;
}

@keyframes scale {

    0%,
    100% {
        transform: scale(1);
    }

50% {
    transform: scale(1.5);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

地球アイコンが回転するアニメーション

アニメーションはkeyframeに「rotateY」を指定し垂直軸を基点にアイコンを回転させてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    position: relative;
    font-size: 2rem;
    animation: flip 5s linear infinite;
}

@keyframes flip {
    0% {
        transform: rotateY(0deg);
    }

100% {
    transform: rotateY(360deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

ロケットが飛んでいくようなアニメーション

アニメーションはkeyframeに「transformY」を指定し上に移動させ「opacity:0;」で徐々に消えるようにしています

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M96 256H128V512H0V352H32V320H64V288H96V256zM512 352V512H384V256H416V288H448V320H480V352H512zM320 64H352V448H320V416H192V448H160V64H192V32H224V0H288V32H320V64zM288 128H224V192H288V128z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    display: grid;
    place-items: center;
    font-size: 2rem;
    height: 100px;
    overflow: hidden;
}

.loading-area svg {
    animation: jump 1.5s linear infinite;
}

@keyframes jump {
    to {
        transform: translateY(-80px);
        opacity: 0;
    }

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

犬が跳ねているアニメーション

アニメーションはkeyframeに「transformY」を指定し跳ねている風にしています

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M309.6 158.5L332.7 19.8C334.6 8.4 344.5 0 356.1 0c7.5 0 14.5 3.5 19 9.5L392 32h52.1c12.7 0 24.9 5.1 33.9 14.1L496 64h56c13.3 0 24 10.7 24 24v24c0 44.2-35.8 80-80 80H464 448 426.7l-5.1 30.5-112-64zM416 256.1L416 480c0 17.7-14.3 32-32 32H352c-17.7 0-32-14.3-32-32V364.8c-24 12.3-51.2 19.2-80 19.2s-56-6.9-80-19.2V480c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V249.8c-28.8-10.9-51.4-35.3-59.2-66.5L1 167.8c-4.3-17.1 6.1-34.5 23.3-38.8s34.5 6.1 38.8 23.3l3.9 15.5C70.5 182 83.3 192 98 192h30 16H303.8L416 256.1zM464 80a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    display: grid;
    place-items: center;
    font-size: 2rem;
    height: 100px;
    overflow: hidden;
}

.loading-area svg {
    animation: jump 0.5s linear infinite;
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0);
    }

50% {
    transform: translateY(-5px);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

餌を食べる鳥のアニメーション

keyframeに「rotate」を指定し餌を食べているようなアニメーションにしています

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M291.2 388.4c31.2-18.8 64.7-36.4 101.1-36.4H448c4.6 0 9.1-.2 13.6-.7l85.3 121.9c4 5.7 11.3 8.2 17.9 6.1s11.2-8.3 11.2-15.3V224c0-70.7-57.3-128-128-128H392.3c-36.4 0-69.9-17.6-101.1-36.4C262.3 42.1 228.3 32 192 32C86 32 0 118 0 224c0 71.1 38.6 133.1 96 166.3V456c0 13.3 10.7 24 24 24s24-10.7 24-24V410c15.3 3.9 31.4 6 48 6c5.4 0 10.7-.2 16-.7V456c0 13.3 10.7 24 24 24s24-10.7 24-24V405.1c12.4-4.4 24.2-10 35.2-16.7zM448 200a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    display: flex;
    align-items: center;
    font-size: 2rem;
    height: 100px;
}

.loading-area svg {
    animation: bow 2s ease-in-out infinite;
}

@keyframes bow {

    0%,
    100% {
        transform: rotate(0deg);
    }

50% {
    transform: rotate(10deg);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

回転するアニメーション

keyframeに「rotate」を指定し回転するアニメーションにしています

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    display: flex;
    align-items: center;
    font-size: 2rem;
    height: 100px;
}

.loading-area svg {
    animation: bow 2s ease-in-out infinite;
}

@keyframes bow {

    90%,
    100% {
        transform: rotate(360deg);
    }

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

車が傾き移動するアニメーション

keyframeに「skewX」「translateX」を指定し傾けて移動させてます

コードを表示

<div class="loading-area">
    <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512">
        <!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
        <path d="M171.3 96H224v96H111.3l30.4-75.9C146.5 104 158.2 96 171.3 96zM272 192V96h81.2c9.7 0 18.9 4.4 25 12l67.2 84H272zm256.2 1L428.2 68c-18.2-22.8-45.8-36-75-36H171.3c-39.3 0-74.6 23.9-89.1 60.3L40.6 196.4C16.8 205.8 0 228.9 0 256V368c0 17.7 14.3 32 32 32H65.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H385.3c7.6 45.4 47.1 80 94.7 80s87.1-34.6 94.7-80H608c17.7 0 32-14.3 32-32V320c0-65.2-48.8-119-111.8-127zM434.7 368a48 48 0 1 1 90.5 32 48 48 0 1 1 -90.5-32zM160 336a48 48 0 1 1 0 96 48 48 0 1 1 0-96z"></path>
    </svg>
</div>

 

.contents {
    position: relative;
    display: grid;
    place-items: center;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    background-color: #fff;
}

.loading-area {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    height: 100px;
    width: 200px;
    overflow: hidden;
}

.loading-area svg {
    animation: bow 2s ease-in-out infinite;
}

@keyframes bow {

    10%,
    20% {
        transform: skewX(-25deg);
    }

100% {
    transform: translateX(150px);
}

}

このWEBパーツを確認する 

HTML・CSSのカスタマイズや動作確認ができます

PR

フリーランスエンジニアに安心保証
動画編集入門プラン（2ヶ月）用LP
css svg アイコン アニメーション
B!

@ハクト

サービス作り・デザイン好き。70年代生まれのWEBエンジニア。WEBパーツをCSSでカスタマイズしてコピペできるサービスを運営中「Pa-tu」。実装したWEBパーツやツールを利用してWEB情報やライフハックを発信してます。

Twitter