メインビジュアルや画像をCSSでアニメーションを付ける7パターン

メインビジュアルや、記事のメイン画像、タイトルに使えそうな動き・アニメーションを、CSSでいくつか作成してみました。
シュワッ、シュッ。みたいな。

基本的な形は、アニメーション変化前のデザインに、クラスを付与しアニメーションをしながら変化後の表示にする流れです。

基本のhtml、CSS

基本の構成は下記です。
テキストをposition: absolute; で画像の上に配置し固定している形ですので、お好みでtopやleftを調整して下さい。

またclassのpattern1もデザインに合わせて、数字を変更してください。

html

<div class="anime_wrap pattern1">
    <img src="image1.jpg" alt="">
    <p>ANIMATION DEMO</p>
</div>

CSS

.anime_wrap{
    position: relative;
    overflow: hidden;
}
.anime_wrap p{
    position: absolute;
    top: 30px;
    left: 30px;
    font-size: 40px;
    font-weight: bold;
}

javascript

どちらもjqueryを読み込ませた例ですので、下記を使う場合は必ずjqueryを読み込ませてください。

ページ表示にアニメーション(クラス付与)する場合

window.onload = function() {
    const fade = document.getElementsByClassName('pattern1');
fade[0].classList.add('show');

要素が表示したらアニメーション(クラス付与)する場合

$(window).scroll(function (){
    $(".anime_wrap").each(function(){
      var offset    = $(this).offset().top;
      var scroll    = $(window).scrollTop();
      var wHeight   = $(window).height();

      if (scroll > offset - wHeight + wHeight/2){
        $(this).addClass("show");
      }
    });
  });

アニメーション例

下記のサンプルはスクロールで対象の要素が表示時にアニメーションをするプラス、画像クリックで再度アニメーションするようにもしております。

基本的なシンプルフェードイン

ANIMATION DEMO

CSS

.pattern1 img{
    opacity: 0;
    transition: .5s;
}
.pattern1.show img{
    opacity: 1;
}
.pattern1 p{
    color: #ffdee7;
    opacity: 0;
    transition: .5s;
    transition-delay: .5s;
}
.pattern1.show p{
    opacity: 1;
}

横からスライドフェードイン

ANIMATION DEMO

CSS

.pattern2 img{
    opacity: 0;
    transform: translateX(40px);
    transition: .5s;
}
.pattern2.show img{
    opacity: 1;
    transform: translateX(0);
}
.pattern2 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern2.show p{
    opacity: 1;
    transform: translateX(0);
}

上にスライドフェードイン

ANIMATION DEMO

CSS

.pattern3 img{
    opacity: 0;
    transform: translateY(40px);
    transition: .5s;
}
.pattern3.show img{
    opacity: 1;
    transform: translateY(0);
}
.pattern3 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern3.show p{
    opacity: 1;
    transform: translateX(0);
}

大きいサイズから小さくなってフェードイン

ANIMATION DEMO

CSS

.pattern4 img{
    opacity: 0;
    transform: scale(1.2);
    transition: .5s;
}
.pattern4.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern4 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
}
.pattern4.show p{
    opacity: 1;
    transform: translateX(0);
}

小さいサイズから大きくなってフェードイン

ANIMATION DEMO

CSS

.pattern5{
    background: #333;
}
.pattern5 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}
.pattern5.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern5 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(40px);
    transition: .8s;
    transition-delay: .8s;
}
.pattern5.show p{
    opacity: 1;
    transform: translateX(0);
}

要素をカーテンみたいに隠して？から表示

ANIMATION DEMO

CSS

.pattern6::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    z-index: 2;
    transition: .5s;
}
.pattern6.show::before{
    transform: translateX(100%);
}
.pattern6 img{
    opacity: 0;
    transition: .5s;
}
.pattern6.show img{
    opacity: 1;
}
.pattern6 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: .5s;
    transition-delay: .5s;
    z-index: 1;
    overflow: hidden;
}
.pattern6.show p{
    opacity: 1;
    transform: translateX(0);
}
.pattern6 p::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #FFF;
    transition: .5s;
    transition-delay: 1s;
}
.pattern6.show p::before{
    transform: translateX(100%);
}

いろいろ混ぜてみてのパターン

ANIMATION DEMO

.pattern7::before,
.pattern7::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pattern7::before{
    background: #FFF;
    z-index: 3;
    transition: 1s;
}
.pattern7::after{
    background: #dc7497;
    z-index: 2;
    transition: 1s;
    transition-delay: .5s;
}
.pattern7.show::before,
.pattern7.show::after{
    transform: translateY(100%);
}
.pattern7 img{
    opacity: 0;
    transform: scale(.8);
    transition: 1.2s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    transition-delay: .4s;
}
.pattern7.show img{
    opacity: 1;
    transform: scale(1);
}
.pattern7 p{
    color: #FFF;
    opacity: 0;
    transform: translateX(-40px);
    transition: 1.2s;
    transition-delay: .8s;
    z-index: 1;
    overflow: hidden;
}
.pattern7.show p{
    opacity: 1;
    transform: translateX(0);
}

MVや画像のアニメーションまとめ

上記は割と定番なパターンかもしれませんが、transformとtransitionを調整すれば、様々なパターンが作成できると思います。
また、疑似要素を使えば更に表現は膨らむかと思います。

ちなみに、上記で使用している画像はO-DANより使用させてもらってます。
ありがとうございまーす！