Help us understand the problem. What is going on with this article?

ワイ「なに!?特定のプロパティのみに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アニメーションも簡単やと!?」

yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした