Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8679

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

$
0
0

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

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

対象

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

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

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

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

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

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

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

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

CSSアニメーションは

  • Transition
  • Animation

に大別されます。

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

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

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

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-propertyallにすつことで全てのプロパティへの適用ができます。

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:fadeIn3sease-in-out1sreversebothrunning;

Animationのまとめは以下です。

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

アニメーション指定方法

Transition

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

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

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

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

.card{color:#333;cursor:pointer;width:200px;transition:opacity1sease-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の作成が必要です。
構文は以下です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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


Viewing all articles
Browse latest Browse all 8679


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>