BootstrapVueのCardにCSSアニメーションをつける方法(filterエフェクト)

※当サイトには一部宣伝が含まれます。

今回はBootstrapVueのCardにCSSアニメーションをつける方法(filterエフェクト)をご紹介。filterプロパティ(blur saturate contrast)でエフェクトがついてます。簡単です。動きます。オシャレなカードを作れます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

BootstrapVueのCardにCSSアニメーションをつける方法(マテリアルデザイン)

BootstrapVueの導入方法
アニメーション動作の確認
コードの確認
このアニメーションのポイント！

１. 【徹底解説】height calcで滑らかなCSS画像アニメーションを実装する方法

まずはBootstrapVueの導入方法から説明していきます。
すでにインストール済みの方はアニメーション動作の確認からご覧ください

BootstrapVueの導入

BootstrapVueの導入がまだの方のために導入方法を説明します

とりあえず下記をコピペして環境を整えてください

main.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

ターミナル

npm install vue bootstrap-vue bootstrap

以上でBootstrapVueの導入は完了です

アニメーション動作の確認

動きは下の画像のような感じになります

実際の動きはこちら

コードの確認

<div class="container py-1">
    <div class="row pb-8 mb-8">
        <!-- 要素の配置大きさ -->
        <div class="col-lg-4 col-md-6 mb-4 mb-lg-0">
            <!-- カードの枠組み -->
            <div class="card rounded shadow-sm border-1">
                <div class="card-body p-8"><img src="https://source.unsplash.com/1000x800" alt="" class="img-fluid d-block mx-auto mb-4">
                    <h5>What is it ?</h5>
                    <p class="small text-muted font-italic">
                      This Photo Is Displayed Randomly.<br>Is This Cool ?<br>What Do you Think ?
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

/* 画像のスタイル指定 */
img {
  /* hover前のぼやけ度合い・彩度・コントラストの調整 */
  filter: blur(3px) saturate(100%) contrast(100%);
  /* アニメーションの速度調整 */
  transition: .5s;
}
/* hover後の画像のスタイル指定 */
img:hover {
  /* hover前のぼやけ度合い・彩度・コントラストの調整 */
  filter: blur(0) saturate(120%) contrast(120%);
  /* アニメーションの速度調整 */
  transition: .5s;
}

ここがポイント！