なぜ、transformプロパティーはtransition対象に指定していないのにアニメーションがかかってしまうのか？

https://codepen.io/anon/pen/ejqqNB

<div>aaaaaa</div>

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  transition: background-color, 3s ease-out 0ms;
  font-color: black;
}
div:hover {
  background-color: red;
  transform: scale(1.5);
  font-color: red;
}

CSSアニメーションを勉強中なのですが、transformプロパティーをtransitionの対象にしていないのにも関わらずアニメーションがかかってしまいます。

  transition: background-color, 3s ease-out 0ms;

自分としては上記のcss指定によりアニメーションがかかることを期待しているのは、background-colorのみです。
実際、font-colroはアニメーションがかかっていません。ですが、transformにはアニメーションがかかってしまいます。
これはなぜなのでしょうか？何か間違ったことを上記cssで行っておりますか？

行動規範の内容に同意します

回答1件

ベストアンサー

div要素に設定しているtransitionプロパティで、background-colorの後ろにカンマがついているのが原因ではないでしょうか。
background-color, 3s ease-out 0msとすると、background-color 0s 0msというアニメーションが設定された後、all 3s ease-out 0msが設定されます。そのため、background-colorプロパティに設定したアニメーション(background-color 0s 0ms)が上書きされ、変化可能なすべてのプロパティがホバーしたときに変化しています。

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        div {
8            width: 100px;
9            height: 100px;
10            background-color: yellow;
11            transition: background-color 3s ease-out 0ms;
12            font-color: black;
13        }
14
15        div:hover {
16            background-color: red;
17            transform: scale(1.5);
18            font-color: red;
19        }
20    </style>
21</head>
22<body>
23<div>aaaaaa</div>
24</body>
25</html>

transition: background-color, height 1s ease-in 0ms;のように複数プロパティーをカンマ区切りで指定するのもショートハンドの場合は出来ないということですよね？こういう場合は、別途、transition-propertyでbackground-color, heighのように指定してあげる必要がありますか？

そうですね、transitionプロパティで複数プロパティをカンマ区切りにして同じアニメーションの設定を適用する、ということは出来なかったと思います。なので、もしbackground-colorとheightに同じアニメーションの設定がしたい場合、以下のように別々に設定する必要があると思います。

CSS
1transition: background-color 1s ease-in 0ms, height 1s ease-in 0ms;

また、transition-propertyプロパティを使用することで、もう少し分かりやすく書くことが出来ます。

CSS
1transition: 1s ease-in 0ms;
2transition-property: background-color, height;

投稿2018/08/18 11:13

編集2018/08/18 12:15

s8_chu

総合スコア14731

murabito

2018/08/18 11:22

ありがとうございます。カンマはアニメーション対象のプロパティーが複数ある場合にそれらを区切る時に使うもので、プロパティーとそれ以降の指定の間にはつける必要はなかったのですね。

murabito

2018/08/18 11:37

補足ありがとうございます。 `transition: background-color, height 1s ease-in 0ms;`のように複数プロパティーをカンマ区切りで指定するのもショートハンドの場合は出来ないということですよね？こういう場合は、別途、transition-propertyで`background-color, heigh`のように指定してあげる必要がありますか？