2022年2月10日 楽しいCSSアニメーションをご紹介します

　　　
初めまして。新人デザイナーのTOMOYOです☆
今年の1月からアジンコートに仲間入り致しました！
　　　

アニメーションが実装されたWebサイトは、要素を動かすことで興味を引かせたり、飽きずに読み進めてもらいやすくなったり、といったメリットがあります。
　　　　

そして、アニメーションってとても楽しいですよね！
コードを書くだけで動きをつけられたり、色が変わったり…まるで魔法みたいだなと思います。
　　　　
そんな楽しさを少しでも知っていただきたく、今回はCSSアニメーションについてご紹介致します。

　　　

片目がウィンクするCSSアニメーション

　　　

　　　　

片目がウィンクするCSSアニメーションを作ってみました☆
　　

黒目とウィンクのそれぞれが透明になるアニメーションを2つ作って、同じ位置に置き、透明になるタイミングをそれぞれ逆にすれば完成です！
　　

ちなみに、opacity: 0;が透明になるコードです。

　　　　

HTML

    <div class="big">
      <div class="eye">
          <div class="left-eye"></div>
          <div class="right-eye">
            <div class="right-eye-dot"></div>
            <p class="wink">＜</p>
          </div>
      </div>
        <div class="mouth"></div>
    </div>

CSS

.eye{
  display:flex;
}
.left-eye{
  height: 20px;
  width: 20px;
  background-color: #000;
  border-radius: 100%;
  margin-top:15px;
  margin-right: 50px;
}
.right-eye-dot{
  height: 20px;
  width: 20px;
  background-color: #000;
  border-radius: 100%;
  margin-top:15px;
  margin-right: 20px;
  animation-name: animation-dot;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes animation-dot{
  10%{
    opacity: 0;
  }
  20%{
    opacity: 0;
}
}
.wink{
  position: relative;
  font-size: 1.4rem;
  top:-27px;
  color: #000;
  animation-name: animation-wink;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes animation-wink{
  90%{
    opacity: 0;
  }
  100%{
    opacity: 0;
}
}
.mouth{
  display: inline-block;
  width: 40px;
  height: 30px;
  border-radius: 50% / 100% 100% 0 0;
  background-color:#FF99FF;
  transform:rotateZ(180deg);
  position: relative;
  left:25px;
  top:-10px;
}

　　　　

ぼやけたテキストが浮かび上がるCSSアニメーション

　　　

　　　

ぼやけたテキストが浮かび上がるCSSアニメーションです。なんだかかっこいい雰囲気がありますね！
　　

filter: blurというコードを使うと、ぼやける効果を付けることができます。これに時間差でアニメーションをつけています。

　　

HTML

<p class="text text-focus-in">COOL</p>

CSS

.text{
  font-size:3rem;
  font-weight: bold;
  font-family: 'Roboto', sans-serif;
  color:#000;
  animation: text-focus-in 4s infinite;
}

@keyframes text-focus-in {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    filter: blur(0px);
    opacity: 1;
  }
}

いかがでしたでしょうか？

　　　

動きがついたアニメーションはとても楽しく感じますね☆
　　　

CSSアニメーションは簡単なコードで動きをつけることができますが、ちょっとしたポイントに適用することで、サイトデザインにより気の利いた、こなれた印象をプラスすることができます。ぜひ取り入れていきたいですね。
　　　

また次回お楽しみに！