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


## 月曜日ワイ
ワイ「ああ・・・月曜日は憂鬱や・・・」
ワイ「しかも今日からはフロントエンドだけでなくサーバーサイドの仕事もせんといかんらしい・・・」
ワイ「そんなん死んでしまうで・・・三途の川を渡ってしまうで・・・」

ハスケル子「三途の川ですか」
ハスケル子「・・・**リバーサイドエンジニア**ですね」

ワイ「言うてる場合か」
ワイ「とにかく今週も頑張っていくで」

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

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

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

> 暗井「現在制作いただいているサイトの件ですが、一点修正をお願いいたします」
> 暗井「急ぎですので、**日曜の午後**までには修正願います」

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

社長「（もう少し焦れや・・・）」

> 暗井「修正内容ですが、CSSについてです」
> 暗井「`閉じる`ボタンをクリックしたら、ボタンがパッと一瞬で白くなって、その後フワッと消えるようにしてください」
> 暗井「いつもの感じで**フワッと**お願いします」

ワイ「なんやそれ」
ワイ「いつもフワッとしてんのは**お前の指示内容**やろ」
ワイ「めんどくさいなぁ・・・」
ワイ「まあええわ、CSSの`transition`でやればええんやろ」

```css
.close-btn {
  transition: 1s;
}
```

ワイ「↑こうやな」
ワイ「ほんで、クリックしたらこのボタンに`fadeout`クラスを追加するとして」
ワイ「ボタンの背景を白くして、フワッと透明にするから」

```css
.close-btn.fadeout {
  background-color: #fff;
  opacity: 0;
}
```

ワイ「↑こんな感じやな」

ワイ「↓出来たで」

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="Yametaro" data-slug-hash="pozWbyY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transition button1">
  <span>See the Pen <a href="https://codepen.io/Yametaro/pen/pozWbyY/">
  transition button1</a> by Yametaro (<a href="https://codepen.io/Yametaro">@Yametaro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ボタンがパッと一瞬で白くならない

ワイ「ありゃ？」
ワイ「背景色はパッと白くなってほしいのに」
ワイ「背景色も1秒かかって透明度と一緒に変化してる感じやな」
ワイ「そらそうやな」
ワイ「`transition`には秒数を1つ指定できるだけやもんな」
ワイ「これは無理や」
ワイ「クライアントはんの言う通りにはならんやつや」
ワイ「なぁ？ハスケル子ちゃん」

ハスケル子「無理なんじゃないですか」

ワイ「うんうん、せやな」

> ワイ「暗井はんへ」
> ワイ「いつもお世話になっております」
> ワイ「CSSの件ですが」
> ワイ「残念ながらそんなことは出来ません」

ワイ「メール送信、と」

ハスケル子「クライアントさんにメール送りました？」

ワイ「ああ、送ったで」

ハスケル子「本当に送りました？」

ワイ「ん？」
ワイ「せやから送ったって」
ワイ「**できません**って」

#### ハスケル子「できますよ」

ワイ「**！！！？？？**」
ワイ「（何やと・・・？）」
ワイ「（ワイがクライアントはんにメールを送ったことを**確認してから**・・・！？）」
ワイ「（**何故・・・！？**）」

ハスケル子「`transition`をこう書けばいいんですよ」

```css
.close-btn {
  transition: opacity 1s;
}
```

ハスケル子「透明度、つまり`opacity`にのみ`transition`をかけるんです」
ハスケル子「そしたら、`background-color`は`transition`無しなので、パッと白くなります」

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="Yametaro" data-slug-hash="WNeZxzW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transition button2">
  <span>See the Pen <a href="https://codepen.io/Yametaro/pen/WNeZxzW/">
  transition button2</a> by Yametaro (<a href="https://codepen.io/Yametaro">@Yametaro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

ワイ「ぐぬぬ・・・」

ハスケル子「`opacity`と`backgorund-color`で秒数を変えることもできますよ」
ハスケル子「`opacity`は3秒、`backgorund-color`は1秒、みたいな」


```css
.close-btn {
  transition: opacity 3s, background-color 1s;
}
```

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

<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="css,result" data-user="Yametaro" data-slug-hash="GRKMjNe" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="transition button3">
  <span>See the Pen <a href="https://codepen.io/Yametaro/pen/GRKMjNe/">
  transition button3</a> by Yametaro (<a href="https://codepen.io/Yametaro">@Yametaro</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

ハスケル子「↑実際動かすとこんな感じです」

ワイ「（ガキが...舐めてると潰すぞ）」

**〜おしまい〜**

**※フィクションです。**

## 追記
もう1つCSSアニメーション系の記事を書いたから、ぜひ読んでくださいやで！
[**ワイ「なに！？ジェネレータ関数を使えば複雑なCSSアニメーションも簡単やと！？」**](https://qiita.com/Yametaro/items/6a24631687dca63c611a)