Tailwind cssでアニメーションをしてみた💻

さいしょに

今回は前回に引き続きTailwind cssでスクロールを促すアニメーションとメインビジュアルなどでよく見られるスライドアニメーションをまとめていこうと思います。

スクロールを促すアニメーション

※今回は画像だとわかりにくかったのでリンクだけ表示しています。

まず最初にスクロールを促すアニメーションです。

<!-- styleタグで囲んで指定する -->

 
<style>

.scroll{
    position:fixed;
    width:1px;
    height:100px;
    top:50%;
    left:50%;
    background-color:#000;
    animation:scroll 1.8s ease-out infinite;
}

@keyframes scroll{
    0%{
        transform:scale( 1 , 0 );
        transform-origin:top;
    }

    50%{
        transform:scale( 1 , 1 );
        transform-origin:top;
    }

    51%{
        transform:scale( 1 , 1 );
        transform-origin:bottom;
    }

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

 
<!-- Tailwind cssで指定する-->

@theme{
    --animate-scroll:scroll 1.8s ease-out infinite;

    @keyframes scroll{
        0%{
            transform:scale( 1 , 0 );
            transform-origin:top;
        }

        50%{
            transform:scale( 1 , 1 );
            transform-origin:top;
        }

        51%{
            transform:scale( 1 , 1 );
            transform-origin:bottom;
        }

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

<div class="fixed w-px h-24 top-1/2 left-1/2 bg-black animate-scroll"></div>

スライドショーのアニメーション

次にメインビジュアルなどでよく見られる画像がスライドするスライドのアニメーションです。

<!-- styleタグで囲んで指定する -->

<style>

.content{
    position:relative;
    max-width:100%;
    width:100%;
    overflow:hidden;

    .slides{
        display:flex;
        width:300%;
        height:800px;
        animation:slideshow 9s infinite;

        .slide{
            width:33.33%;
            height:100%;
            background-size:cover;
            background-position:center;
        }

        .slide1{
            background-image:url(./image/thumbnail_image01.png);
        }

        .slide2{
            background-image:url(./image/thumbnail_image03.png);
        }

        .slide3{
            background-image:url(./image/thumbnail_image02.png);
        }
    }
}

@keyframes slideshow{
    0%{
        margin-left:0;
    }

    33%{
        margin-left:0;
    }

    34%{
        margin-left:-100%;
    }

    66%{
        margin-left:-100%;
    }

    67%{
        margin-left:-200%;
    }

    100%{
        margin-left:-200%;
    }
}

 
<!-- Tailwind cssで指定する -->

@theme{
    --animate-slideshow:slideshow 9s infinite;

    @keyframes slideshow{
        0%{
            margin-left:0;
        }

        33%{
            margin-left:0;
        }

        34%{
            margin-left:-100%;
        }

        66%{
            margin-left:-100%;
        }

        67%{
            margin-left:-200%;
        }

        100%{
            margin-left:-200%;
        }
    }
}

<div class="relative max-w-full w-full overflow-hidden">
    <div class="flex w-[300%] h-96 animate-slideshow">
        <div class="w-1/3 h-full bg-center bg-cover bg-[url(./image/thumbnail_image01.png)]"></div>
        <div class="w-1/3 h-full bg-center bg-cover bg-[url(./image/thumbnail_image03.png)]"></div>
        <div class="w-1/3 h-full bg-center bg-cover bg-[url(./image/thumbnail_image02.png)]"></div>
    </div>
</div>

さいごに

今回はスクロールを促すアニメーションとスライドショーのアニメーションをまとめてみました。
初めてTailwind cssでアニメーションを指定してうまく動かないこともありましたが、アニメーションを自分で考えてできてよかったです。
他のアニメーションにも挑戦していこうと思います。