Edited at

ワイ「なに!?特定のプロパティのみにtransitionを指定できるやと!?」


月曜日ワイ

ワイ「ああ・・・月曜日は憂鬱や・・・」

ワイ「しかも今日からはフロントエンドだけでなくサーバーサイドの仕事もせんといかんらしい・・・」

ワイ「そんなん死んでしまうで・・・三途の川を渡ってしまうで・・・」

ハスケル子「リバーサイドエンジニアですね」

ワイ「言うてる場合か」

ワイ「とにかく今週も頑張っていくで」


お仕事開始

ワイ「お、週末の間にクライアントはんからメールが来てるで」


暗井「お世話になっております。株式会社ブラックの暗井 暗人(くらい・あんと)です」


ワイ「月曜から嫌な気持ちにさせる会社名やな・・・」


暗井「現在制作いただいているサイトの件ですが、一点修正をお願いいたします」

暗井「急ぎですので、日曜の午後までには修正願います」


ワイ「残念、もう月曜や!」

社長「(もう少し焦れや・・・)」


暗井「修正内容ですが、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-colortransition無しなので、パッと白くなります」

ハスケル子「↓こんな感じです」


See the Pen
transition button2
by Yametaro (@Yametaro)
on CodePen.

ハスケル子「ほら、できた」

ワイ「ぐぬぬ・・・」

ハスケル子「opacitybackgorund-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アニメーションも簡単やと!?」