カレー、ほかほかにさせたくない？
というわけで、今回はカレーに簡単な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:fadeIn3sease-in-out1sreversebothrunning;Animationのまとめは以下です。
- transitionより指定できるプロパティが多い
- 状態変化の
「〜〜〜」を「〜〜〜」にしたらの指定はしない - 繰り返し再生ができるし再生回数も指定できる
アニメーション指定方法
Transition
実際にtransitionを適用する場合は以下のようなコードになります。
例として、このカードにマウスオーバーした時に不透明度を下げましょう
<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時の変化を指定}}
ふわぁんと薄くなりましたね。
実際のコードは以下にあります。
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の擬似要素に対して今回はopacityとtransitionプロパティのアニメーションをつけます。
この時、アニメーションさせる対象の要素に対して、@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アニメーション使って遊んでみてください！
ありがとうございましたー！
引き続きよろしくお願いします。