回答編集履歴
1
追記
answer
CHANGED
|
@@ -129,4 +129,37 @@
|
|
|
129
129
|
}
|
|
130
130
|
```
|
|
131
131
|
|
|
132
|
-
`@keyframes`の使い方，分かってもらえましたでしょうか？
|
|
132
|
+
`@keyframes`の使い方，分かってもらえましたでしょうか？
|
|
133
|
+
|
|
134
|
+
---
|
|
135
|
+
|
|
136
|
+
> この問題が生じてしまう理由と解決方法をご教示願えますでしょうか？
|
|
137
|
+
|
|
138
|
+
上述しました．仕様です
|
|
139
|
+
|
|
140
|
+
> またJSFiddleでは滑らかに動くのですが、自身の構築サイトではカクカクする現象が生じているのですが、これは読み込むべきページの量によってCSS上どうしても生じてしまい得る現象なのでしょうか？
|
|
141
|
+
|
|
142
|
+
CSSでなくても，他の部分で重い処理をしていれば当然カクつきます（CSSアニメーションを適用しまくっているサイトでもときどき起こります）
|
|
143
|
+
|
|
144
|
+
> また、最終的にaが100%になった際にaにテキストを表示させたい（例えば100%など）のですが、keyframe animationでは（例えば100%のタイミングで）after content等の擬似要素を設定することができませんでした。他に自分が思いつく方法としてはJQueryでsetTimeoutで同じ秒数遅らせてappendするくらいしか思いつかないのですが、必ずしもCSSで設定した3SとJQueryの setTImeout3000が連動して動作することが保証されないとも思いますでの、良い方法があればアドバイスを願います。
|
|
145
|
+
|
|
146
|
+
そのスタイルを書く．以上
|
|
147
|
+
```css
|
|
148
|
+
/*「.a」に指定しても擬似要素は動かない→「.a::after」に指定すれば良い*/
|
|
149
|
+
|
|
150
|
+
.a::after{
|
|
151
|
+
content: '';
|
|
152
|
+
animation: show_after 3s linear forwards;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@keyframes show_after{
|
|
156
|
+
99.9%{
|
|
157
|
+
content: '';
|
|
158
|
+
}
|
|
159
|
+
100%{
|
|
160
|
+
content: "[msg]";
|
|
161
|
+
color: #fff;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
```
|
|
165
|
+
|