月曜日ワイ
ワイ「ああ・・・月曜日は憂鬱や・・・」
ワイ「しかも今日からはフロントエンドだけでなくサーバーサイドの仕事もせんといかんらしい・・・」
ワイ「そんなん死んでしまうで・・・三途の川を渡ってしまうで・・・」
ハスケル子「三途の川ですか」
ハスケル子「・・・リバーサイドエンジニアですね」
ワイ「言うてる場合か」
ワイ「とにかく今週も頑張っていくで」
お仕事開始
ワイ「お、週末の間にクライアントはんからメールが来てるで」
暗井「お世話になっております。株式会社ブラックの暗井 暗人（くらい・あんと）です」
ワイ「月曜から嫌な気持ちにさせる会社名やな・・・」
暗井「現在制作いただいているサイトの件ですが、一点修正をお願いいたします」
暗井「急ぎですので、日曜の午後までには修正願います」
ワイ「残念、もう月曜や！」
社長「（もう少し焦れや・・・）」
暗井「修正内容ですが、CSSについてです」
暗井「閉じるボタンをクリックしたら、ボタンがパッと一瞬で白くなって、その後フワッと消えるようにしてください」
暗井「いつもの感じでフワッとお願いします」
ワイ「なんやそれ」
ワイ「いつもフワッとしてんのはお前の指示内容やろ」
ワイ「めんどくさいなぁ・・・」
ワイ「まあええわ、CSSのtransitionでやればええんやろ」
.close-btn {
transition: 1s;
}
ワイ「↑こうやな」
ワイ「ほんで、クリックしたらこのボタンにfadeoutクラスを追加するとして」
ワイ「ボタンの背景を白くして、フワッと透明にするから」
.close-btn.fadeout {
background-color: #fff;
opacity: 0;
}
ワイ「↑こんな感じやな」
ワイ「↓出来たで」
See the Pen transition button1 by Yametaro (@Yametaro) on CodePen.
ボタンがパッと一瞬で白くならない
ワイ「ありゃ？」
ワイ「背景色はパッと白くなってほしいのに」
ワイ「背景色も1秒かかって透明度と一緒に変化してる感じやな」
ワイ「そらそうやな」
ワイ「transitionには秒数を1つ指定できるだけやもんな」
ワイ「これは無理や」
ワイ「クライアントはんの言う通りにはならんやつや」
ワイ「なぁ？ハスケル子ちゃん」
ハスケル子「無理なんじゃないですか」
ワイ「うんうん、せやな」
ワイ「暗井はんへ」
ワイ「いつもお世話になっております」
ワイ「CSSの件ですが」
ワイ「残念ながらそんなことは出来ません」
ワイ「メール送信、と」
ハスケル子「クライアントさんにメール送りました？」
ワイ「ああ、送ったで」
ハスケル子「本当に送りました？」
ワイ「ん？」
ワイ「せやから送ったって」
ワイ「できませんって」
ハスケル子「できますよ」
ワイ「！！！？？？」
ワイ「（何やと・・・？）」
ワイ「（ワイがクライアントはんにメールを送ったことを確認してから・・・！？）」
ワイ「（何故・・・！？）」
ハスケル子「transitionをこう書けばいいんですよ」
.close-btn {
transition: opacity 1s;
}
ハスケル子「透明度、つまりopacityにのみtransitionをかけるんです」
ハスケル子「そしたら、background-colorはtransition無しなので、パッと白くなります」
ハスケル子「↓こんな感じです」
See the Pen transition button2 by Yametaro (@Yametaro) on CodePen.
ハスケル子「ほら、できた」
ワイ「ぐぬぬ・・・」
ハスケル子「opacityとbackgorund-colorで秒数を変えることもできますよ」
ハスケル子「opacityは3秒、backgorund-colorは1秒、みたいな」
.close-btn {
transition: opacity 3s, background-color 1s;
}
ハスケル子「↑こんな感じです」
See the Pen transition button3 by Yametaro (@Yametaro) on CodePen.
ハスケル子「↑実際動かすとこんな感じです」
ワイ「（ガキが...舐めてると潰すぞ）」
〜おしまい〜
※フィクションです。
追記
もう1つCSSアニメーション系の記事を書いたから、ぜひ読んでくださいやで！
ワイ「なに！？ジェネレータ関数を使えば複雑なCSSアニメーションも簡単やと！？」