回答編集履歴
1
質問の変更に合わせて追記
test
CHANGED
|
@@ -29,3 +29,165 @@
|
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
と、`!important`規則を使っているので、そちらのスタイルが優先されているのではないでしょうか。
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
### 質問の変更に合わせて追記
|
|
36
|
+
|
|
37
|
+
ご提示のサイトのCSSを抜粋して整形すると↓こんな感じです。
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
|
|
41
|
+
@keyframes sliderContentAnimation1{
|
|
42
|
+
|
|
43
|
+
from{
|
|
44
|
+
|
|
45
|
+
opacity: 0;
|
|
46
|
+
|
|
47
|
+
text-shadow: 0 0 20px #ffffff;
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
to{
|
|
52
|
+
|
|
53
|
+
opacity: 1;
|
|
54
|
+
|
|
55
|
+
text-shadow: 0 0 0 #ffffff;
|
|
56
|
+
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.p-index-slider__item:nth-child(1).slick-active .p-index-slider__item-title{
|
|
62
|
+
|
|
63
|
+
animation: sliderContentAnimation1 1.2s ease forwards 2s;
|
|
64
|
+
|
|
65
|
+
transform: translateZ(0);
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.p-index-slider__item-title{
|
|
70
|
+
|
|
71
|
+
color:inherit;
|
|
72
|
+
|
|
73
|
+
text-shadow:1px 2px 3px #808080 !important;
|
|
74
|
+
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
text-shadowをCSSアニメさせているところ、`!important`規則でアニメーションを強制無効にしている感じです。Firefoxは`!important`が優先されてCSSアニメーションが無効になっていましたが、ChromeはCSSアニメーションが優先されて`!important`が無効化されていました。
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
わかりやすいサンプルを置いておきます。
|
|
84
|
+
|
|
85
|
+
[サンプル](https://jsfiddle.net/Lhankor_Mhy/xdgsp2ey/)
|
|
86
|
+
|
|
87
|
+
```html
|
|
88
|
+
|
|
89
|
+
<p>
|
|
90
|
+
|
|
91
|
+
test
|
|
92
|
+
|
|
93
|
+
</p>
|
|
94
|
+
|
|
95
|
+
<p>
|
|
96
|
+
|
|
97
|
+
test
|
|
98
|
+
|
|
99
|
+
</p>
|
|
100
|
+
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
```css
|
|
104
|
+
|
|
105
|
+
p{
|
|
106
|
+
|
|
107
|
+
animation: test 1.2s ease forwards 2s;
|
|
108
|
+
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
@keyframes test {
|
|
112
|
+
|
|
113
|
+
0% { color: #f00 }
|
|
114
|
+
|
|
115
|
+
100% { color: #000 }
|
|
116
|
+
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
p{
|
|
120
|
+
|
|
121
|
+
color: #00f ;
|
|
122
|
+
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
p+p{
|
|
126
|
+
|
|
127
|
+
color: #00f !important;
|
|
128
|
+
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
ChromeとFirefoxでは動作が違っているかと思います。
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
さてそれで、どちらが正しいのか、という話になりますが、CSS3の仕様書によりますと、
|
|
138
|
+
|
|
139
|
+
> The origin of a declaration is based on where it comes from and its importance is whether or not it is declared !important (see below). The precedence of the various origins is, in descending order:
|
|
140
|
+
|
|
141
|
+
0. Transition declarations [css-transitions-1]
|
|
142
|
+
|
|
143
|
+
0. Important user agent declarations
|
|
144
|
+
|
|
145
|
+
0. Important user declarations
|
|
146
|
+
|
|
147
|
+
0. Important author declarations
|
|
148
|
+
|
|
149
|
+
0. Animation declarations [css-animations-1]
|
|
150
|
+
|
|
151
|
+
0. Normal author declarations
|
|
152
|
+
|
|
153
|
+
0. Normal user declarations
|
|
154
|
+
|
|
155
|
+
0. Normal user agent declarations
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
> Declarations from origins earlier in this list win over declarations from later origins.
|
|
160
|
+
|
|
161
|
+
[Origin and Importance | CSS Cascading and Inheritance Level 3](https://www.w3.org/TR/css-cascade-3/#cascade-origin)
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
と、ありますから、CSSアニメーションより`!important`が優先されるべきで、Chromeのバグだろうと思います。
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
さて、具体的な解決方法ですが、キーフレームから`text-shadow`の部分を削除してしまえばいいかと思います。どうせ`!important`によって無効になるのですから、消してしまっても問題はないはずです。
|
|
174
|
+
|
|
175
|
+
```css
|
|
176
|
+
|
|
177
|
+
@keyframes sliderContentAnimation1{
|
|
178
|
+
|
|
179
|
+
from{
|
|
180
|
+
|
|
181
|
+
opacity: 0;
|
|
182
|
+
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
to{
|
|
186
|
+
|
|
187
|
+
opacity: 1;
|
|
188
|
+
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
```
|