回答編集履歴
4
追記
test
CHANGED
|
@@ -68,10 +68,22 @@
|
|
|
68
68
|
|
|
69
69
|
|
|
70
70
|
|
|
71
|
-
そうですね、複数プロパティをカンマ区切りにして同じアニメーションの設定を適用する、ということは出来なかったと思います。なので、もし`background-color`と`height`に同じアニメーションの設定がしたい場合、以下のように別々に設定する必要があると思います。
|
|
71
|
+
そうですね、`transitionプロパティ`で複数プロパティをカンマ区切りにして同じアニメーションの設定を適用する、ということは出来なかったと思います。なので、もし`background-color`と`height`に同じアニメーションの設定がしたい場合、以下のように別々に設定する必要があると思います。
|
|
72
72
|
|
|
73
73
|
```CSS
|
|
74
74
|
|
|
75
75
|
transition: background-color 1s ease-in 0ms, height 1s ease-in 0ms;
|
|
76
76
|
|
|
77
77
|
```
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
また、`transition-propertyプロパティ`を使用することで、もう少し分かりやすく書くことが出来ます。
|
|
82
|
+
|
|
83
|
+
```CSS
|
|
84
|
+
|
|
85
|
+
transition: 1s ease-in 0ms;
|
|
86
|
+
|
|
87
|
+
transition-property: background-color, height;
|
|
88
|
+
|
|
89
|
+
```
|
3
追記
test
CHANGED
|
@@ -57,3 +57,21 @@
|
|
|
57
57
|
</html>
|
|
58
58
|
|
|
59
59
|
```
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
> `transition: background-color, height 1s ease-in 0ms;`のように複数プロパティーをカンマ区切りで指定するのもショートハンドの場合は出来ないということですよね？こういう場合は、別途、transition-propertyで`background-color, heigh`のように指定してあげる必要がありますか？
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
そうですね、複数プロパティをカンマ区切りにして同じアニメーションの設定を適用する、ということは出来なかったと思います。なので、もし`background-color`と`height`に同じアニメーションの設定がしたい場合、以下のように別々に設定する必要があると思います。
|
|
72
|
+
|
|
73
|
+
```CSS
|
|
74
|
+
|
|
75
|
+
transition: background-color 1s ease-in 0ms, height 1s ease-in 0ms;
|
|
76
|
+
|
|
77
|
+
```
|
2
追記
test
CHANGED
|
File without changes
|
1
追記
test
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
`div要素`に設定している`transitionプロパティ`で、`background-color`の後ろにカンマがついているのが原因ではないでしょうか。
|
|
1
|
+
[`div要素`](https://developer.mozilla.org/ja/docs/Web/HTML/Element/div)に設定している[`transitionプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/transition)で、`background-color`の後ろにカンマがついているのが原因ではないでしょうか。
|
|
2
|
+
|
|
3
|
+
`background-color, 3s ease-out 0ms`とすると、`background-color 0s 0ms`というアニメーションが設定された後、`all 3s ease-out 0ms`が設定されます。そのため、[`background-colorプロパティ`](https://developer.mozilla.org/ja/docs/Web/CSS/background-color)に設定したアニメーション(`background-color 0s 0ms`)が上書きされ、変化可能なすべてのプロパティがホバーしたときに変化しています。
|
|
4
|
+
|
|
5
|
+
|
|
2
6
|
|
|
3
7
|
```HTML
|
|
4
8
|
|