LoginSignup
40
22

More than 3 years have passed since last update.

カレーAdvent Calendar 2019Day 17
@tsugu_maru_san(いし まる)

カレーを例にしたCSSアニメーションのことはじめ

Posted at

カレー、ほかほかにさせたくない？

というわけで、今回はカレーに簡単なCSSアニメーションをつけていきたいと思います。

対象

  • CSS書けるけど、もうちょっと表現を豊かにしたい人
  • CSS アニメーションなんのこっちゃ
  • カレーのルーはご飯の真上にぶっかける人

といった方に向けて書いていこうと思います。
CSSアニメーションのテクニックとか、速度を考慮したらこれがベストだ！等の
上級者向けのものは書きません。（当方まだまだペーペーなので）
あくまで基礎のご紹介です！

そもそもCSSアニメーションって？

CSSは以下のように定義されています。

カスケーディングスタイルシートCascading Style Sheets (CSS) はスタイルシート言語であり、 HTML や XML (方言である SVG, MathML, XHTML などを含む) で記述された文書の体裁や見栄えを表現するために用いられます。 CSS は、要素が画面上で (あるいは紙や音声といった別のメディア上で) どのように表現されるのかを定義します。

  • スタイルシート言語である
  • 文書の体裁・見栄えを表現する為に用いる

ざっとこのようなものです。

それを踏まえて、CSSアニメーションというのは
要素をアニメーションさせるCSSの機能の1つであるとされています。

CSSアニメーションは

  • Transition
  • Animation

に大別されます。

ではそれぞれどういうものなのかを見てみます。

2種類のCSSアニメーション

上記で紹介したTransitionとAnimationについてそれぞれ説明します。

Transition

Transitionは要素の状態間の変化を定義することができます。
例えば、:hover時や、:active時にtransitionを効かせることが可能です。

「〜〜〜」を「〜〜〜」したら「〜〜」を「〜〜〜」に状態変化させる。
と覚えておくとよいと思います。
「カレーに手」を「突っ込ん」だら「手」を「真っ赤」に状態変化させる。
みたいな感じ。サイコパス

また、transitionは一方通行！繰り返しません。

transitionで指定できるプロパティは以下です。

プロパティ名 効果 記述例
transition-property トランジションの効果を適用するプロパティ transition-property: opacity;
transition-duration アニメーションの継続時間 transition-duration: 1s;
transition-timing-function 加速曲線の定義 transition-timing-function: ease-in;
transition-delay アニメーションが始まるまでの待ち時間の定義 transition-delay: 250ms;

これらのプロパティは、transitionプロパティで一括指定できます。
transition-propertyはallにすつことで全てのプロパティへの適用ができます。

transition: {プロパティ名} {継続時間} {加速曲線} {待ち時間};
transition: margin-right 4s ease-in-out 1s;

長くなりましたが、Transitionのまとめは以下です。

  • Transitionは状態を変化させるアニメーションを付与できる
    • 「〜〜〜」を「〜〜〜」したらを指定する
  • 1回きりであり、繰り返しの再生はできない
  • 指定できるのは以下で、一括指定できる
    • トランジションを適用するプロパティ
    • アニメーションの継続時間
    • 加速曲線の定義
    • アニメーションが始まるまでの待ち時間

Animation

続いてAnimationについてです。
Animationは要素の状態間の変化を定義するTransitionに対し、スタイル間のアニメーションを適用します

なので、Transitionの「〜〜〜」を「〜〜〜」にしたら部分はごっそり不要になり、
「〜〜〜」を「〜〜〜」にするのみの記述になります。

また、Animationはアニメーションの繰り返しを行うことが可能です。

animationプロパティで指定できるものは以下です。

プロパティ名 効果 記述例
animation-name トランジションの効果を適用するプロパティ transition-property: opacity;
animation-duration アニメーションの継続時間 transition-duration: 1s;
animation-timing-function 加速曲線の定義 transition-timing-function: ease-in;
animation-delay アニメーションが始まるまでの待ち時間の定義 transition-delay: 250ms;
animation-iteration-count アニメーションが停止するまでの再生回数 animation-iteration-count: infitite;
animation-direction 再生の向きの設定 animation-direction: forwards;
animation-fill-mode アニメーション再生中・再生後のスタイルの指定 animation-fill-mode: both;
animation-play-state アニメーションが実行中か停止中かの設定 animation-play-state: paused;

こちらもanimationプロパティで一括指定できます。

animation: {アニメーション名} {継続時間} {加速曲線} {再生開始までの待ち時間} {再生の向き} {再生中・再生後のスタイル指定} {停止中or実行中};
animation: fadeIn 3s ease-in-out 1s reverse both running;

Animationのまとめは以下です。

  • transitionより指定できるプロパティが多い
  • 状態変化の「〜〜〜」を「〜〜〜」にしたらの指定はしない
  • 繰り返し再生ができるし再生回数も指定できる

アニメーション指定方法

Transition

実際にtransitionを適用する場合は以下のようなコードになります。
例として、このカードにマウスオーバーした時に不透明度を下げましょう

スクリーンショット 2019-12-17 15.26.39.png

<div class="card">
  <a class="card_link" href="#">
    <span class="card_title">おいしいカレー ¥500</span>
    <span class="card_image">
      <img  src="https://japaclip.com/files/curry-rice.png" alt="">
    </span>
  </a>
</div>

transitionの対象を.cardとし、マウスオーバー時の指定を:hoverにしてあげます。

.card {
  color: #333;
  cursor: pointer;
  width: 200px;
  transition: opacity 1s ease-in-out; //transition対象を宣言
  &:hover {
    opacity: .7; //hover時の変化を指定
  }
}

スクリーンショット 2019-12-17 15.29.58.png

ふわぁんと薄くなりましたね。

実際のコードは以下にあります。
https://codepen.io/thugumi-ishimaru/pen/BgxgrR?editors=1100

Animation

animationを指定する時は、「何秒のときにどの状態」が必要になるので、
css側に@keyframesの作成が必要です。
構文は以下です。

@keyframes animation-name {
 0% {
  アニメーション開始時の処理 
 }
 100% {
  アニメーション完時の処理
 }
}

animation-nameは任意の名前にしてください。
上記の@keyframesを作った上で、要素にanimationを適用させます。

こちらはせっかくなので、以下のカレーを題材にしましょう。

カレーに湯気を......

はい、お待たせしました。
お腹空きましたかね、私まだお昼ご飯食べてないのでお腹空きました。

こんなカレー鍋を作りました。
湯気がゆらゆらしてるものです。
（スマホでバグってすみません）

See the Pen カレー鍋 by Thugumi Ishimaru (@thugumi-ishimaru) on CodePen.

湯気（.yuge）を用意します。
class名雑なのは自覚あるので許して

<div class="curryPot">
  <div class="curryPot_head">
     (中略)
    <div class="yuge"></div>
  </div>
     (中略)
</div>

.yugeの擬似要素に対して今回は
opacityとtransitionプロパティのアニメーションをつけます。
この時、アニメーションさせる対象の要素に対して、@keyframesの0%の状態と同じ値を
指定しておく必要があります。

.yuge {
  position: relative;
  &:before,
  &:after {
    animation: yugeUp 5s ease-in-out infinite; //ここが！アニメーションの！指定だよ！アニメーションの時間は5秒間！永遠再生してください！！！！
    opacity: 0; //@keyframesの0%のときと同じ値
    transform: translateY(-15px); //@keyframesの0%のときと同じ値
  }
  &:before {
    content: "";
    position: absolute;
    height: 200px;
    top: -250px;
    left: 60px;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 135px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
  &:after {
    content: "";
    height: 200px;
    top: -180px;
    right: 60px;
    display: block;
    position: absolute;
    border-right: 0px solid transparent;
    border-top: 2px solid #fff;
    border-left: 125px solid #fff;
    border-bottom: 12px solid transparent;
    filter: blur(35px);
    z-index: 4;
    transform: rotate(168deg) skewY(10deg);
    border-radius: 80% 0 10% 10%;
  }
}

で、css内に@keyframesを設定します。

@keyframes yugeUp {
  0% {
    opacity: 0;
    transform: translateY(-15px);
  }
  50% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(-250px);
  }
}

これでほかほかのカレーができました！
めしあがれ！！！！！！

まとめ

今回はカレーを題材にしてCSSアニメーションを紹介しました。
以下を覚えてたらなんとなく、多分、実務で、できるかもしれません。

  • transitionとanimationの2種類があるよ
  • transitionは「〜〜」に「〜〜」をしたらの指定が必要だよ
  • animationは@keyframesの設定と再生開始時の指定が必要だよ

もっと詳しく知りたい人はぜひ手元でCSSアニメーション使って遊んでみてください！

ありがとうございましたー！
引き続きよろしくお願いします。

40
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
40
22