ブログデザイン備忘録～ Animista - つれづれなる備忘録

スクロールに連動するアニメーションを実装

で紹介されているCSSアニメーションの生成ツールAnimistaを紹介したい。

素材としては上記colissのものを利用する。まずHTMLは以下のようにする。

<div class="wrapper">
        <div class="card">
            <div class="image"></div>
            <h2>Profile picture</h2>
            <p>Some text goes here. Some text goes here....</p>
        </div>
</div>

cssを用いてimageの四角形をバウンドさせ、文字をそれぞれ左右からフェードインするアニメーションをつける。まずカードのデザインのためのCSSは

.wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #5dafb8;
    color:white;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
 
.card {
    height: 50vh;
    border-radius: 13px;
    box-shadow: 20px 40px 33px rgba(0,0,0,0.3);
    padding: 2rem;
    width: 35vh;
    background-color:  #6cc2ce;
 
}
 
/* 背景画像としてグラデーションを使用してdivのスタイルを設定 */
.image {
    width: 35vh;
    height: 20vh;
    background-image: linear-gradient(70deg, RoyalBlue   , DarkTurquoise );
    background-size: cover;
    background-position: center center;
    box-shadow:  10px 15px 15px 6px #3891b4;
    border-radius: 15px;
 
}

カード上のタイトル<h2>は左から右、文字<p>は右から左にフェードインするアニメーションを以下のように設定する。

.card h2 {
        /* タイトルのアニメーション、左から右にフェードイン */
    animation: animTitle 2s infinite;
} 
.card p {
        /* パラグラフのアニメーション、右から左にフェードイン */
    animation: animContent 2s infinite;
}
 
@keyframes animTitle {
    from {
            /* アニメーションの開始値を定義 */
            transform: translateX(-50px);
            opacity: 0;
    } 
    to  {
            /* アニメーションの終了値を定義 */
            transform: translateX(0);
            opacity: 1;
   } 
 }
 
 @keyframes animContent {
    from {
            /* アニメーションの開始値を定義 */
            transform: translateX(50px);
            opacity: 0;
    } 
    to  {
            /* アニメーションの終了値を定義 */
            transform: translateX(0);
            opacity: 1;
   } 
 }

次にAnimistaを用いてアニメーションCSSを生成する。例えば一番上のメニューバーAttentionをクリックして、さらにBOUNCEを選択するとオブジェクトが跳ねるアニメーションが表示される。 infiniteにチェックをいれると、アニメーションがループする。効果を確認したら、右上の{・} (Generate Code)をクリックするとCSSコードが生成される。あとはCOPY CLASS, COPY KEYFRAMESをクリックしてはりつければよい。COPY CLASSをはりつけると以下のようになるので

.bounce-top {
    -webkit-animation: bounce-top 0.9s infinite both;
            animation: bounce-top 0.9s infinite both;
}

今回はクラス名を.card .imageと以下のように書き換える

.card .image {
    -webkit-animation: bounce-top 0.9s infinite both;
            animation: bounce-top 0.9s infinite both;
}

COPY KEYFRAMESはそのまま貼り付けて、とくに変更はしない。（コードは省略）

コード全体と動作は以下の通り

See the Pen anim_card2 by ATATAT (@atatat) on CodePen.