本題に入る前に,すこしお話を
まず@keyframes
の使い方ですが,ご自身の過去質問を思い出してください
フレームの内容はそんなに頻繁に定義する必要はありません.
スタイルの中間地点を良い感じにくみ取ってくれるからです.
今回のように,初期状態から遷移させるだけなら,
css
1@keyframes anim{
2 100%{
3 background: green;
4 }
5}
最終フレームだけで十分です
(初期値としてwidth:50%;
が既に指定されているので,ここで指定し直す必要はない)
あとCSSにおけるコメントアウトに,行コメント(//
)はありません.
/* ちゃんと,このように囲ってください.でないとエラーになります */
そして,セレクタは統合してください
css
1.a{
2 background:blue;
3 width:50%;
4 border-radius:5px 0px 0px 5px;
5}
6.b{
7 background:red;
8 width:50%;
9}
10.a{
11 animation:my_anime1 3s linear forwards;
12}
13.b{
14 animation:my_anime2 3s linear forwards;
15}
このように,同じセレクタを複数書くのは,全体像を把握しづらくなるだけです
本題
css
1@keyframes my_anime1 {
2 100% {
3 width: 100%;
4 border-radius:0px 5px 5px 0px;
5 /*100%になる前から適用されてしまう*/
6 }
7}
とのことですが,それは当たり前です.先述の通り,初期値と各フレーム,フレーム間の中間スタイルを良い感じにくみとって適用してくれるのが,@keyframes
だからです
分かりやすいデモとなるように数値等を若干編集したものが,以下になります.
css
1.main{
2 width:100px;
3 height:50px;
4 display:flex;
5}
6.a{
7 background:blue;
8 width:50%;
9 border-radius:20px 0 0 20px;
10 animation:my_anime1 3s linear infinite;
11}
12.b{
13 background:red;
14 width:50%;
15 animation:my_anime2 3s linear infinite;
16}
17
18@keyframes my_anime1 {
19 100% {
20 width: 100%;
21 border-radius:0 20px 20px 0;
22 /*100%になる前から適用されてしまう*/
23 }
24}
25
26@keyframes my_anime2 {
27 100% {
28 width: 0;
29 border-radius: 0;
30 }
31}
問題となっているborder-radius: 0 20px 20px 0;
の部分はきちんと効いています
gifアニメを見れば,.a
のborder-radius
が
初期値であるborder-raius: 20px 0 0 20px;
(左上と左下だけ角丸)から
最終フレームのborder-raius: 0 20px 20px 0;
(右上と右下だけ角丸)に変化
していることが分かると思います
つまり,何らおかしなことは起きおらず,
border-radius:0 20px 20px 0;
はきちんと,@keyframes
での指定にそっています
ただ,もし「100%になる前から適用されてしまう」というのが,「100%に到達したときにスタイルが適用されるようにしたい」という意味であったなら,少し@keyframes
の指定を細分化しなくてはいけません.例えばこのように.
css
1@keyframes my_anime2 {
2 99.9%{
3 border-radius:20px 0 0 20px;/*直前までborder-radiusのスタイルのみ維持*/
4 }
5 100% {
6 width: 100%;/*widthは通常通り遷移する*/
7 border-radius:0 20px 20px 0;/*100%時点で即座に変化*/
8 }
9}
CSSは「Cascading Style Sheet」,つまり滝のように上から順番に適用されるスタイルシートです
読み込まれた,もしくは実行されたスタイリングのうち,最新のものが「上書き」されて表示されます
テキストファイル上では,下部に書いたスタイルの方がより適用されやすくなります
なので,仮に初期の角丸をなくしたいなら,.a
の記述自体を書き換えるか,こうする必要があります
css
1@keyframes my_anime2 {
2 0%{
3 border-radius: 0;/*初期状態を上書き*/
4 }
5 99.9%{
6 border-radius: 0;/*直前まで角丸なし*/
7 }
8 100% {
9 width: 100%;/*widthは何度も書かなくて良い∵初期値(50%)との中間が勝手に指定されるから*/
10 border-radius:0 20px 20px 0;
11 }
12}
@keyframes
の使い方,分かってもらえましたでしょうか?
この問題が生じてしまう理由と解決方法をご教示願えますでしょうか?
上述しました.仕様です
またJSFiddleでは滑らかに動くのですが、自身の構築サイトではカクカクする現象が生じているのですが、これは読み込むべきページの量によってCSS上どうしても生じてしまい得る現象なのでしょうか?
CSSでなくても,他の部分で重い処理をしていれば当然カクつきます(CSSアニメーションを適用しまくっているサイトでもときどき起こります)
また、最終的にaが100%になった際にaにテキストを表示させたい(例えば100%など)のですが、keyframe animationでは(例えば100%のタイミングで)after content等の擬似要素を設定することができませんでした。他に自分が思いつく方法としてはJQueryでsetTimeoutで同じ秒数遅らせてappendするくらいしか思いつかないのですが、必ずしもCSSで設定した3SとJQueryの setTImeout3000が連動して動作することが保証されないとも思いますでの、良い方法があればアドバイスを願います。
そのスタイルを書く.以上
css
1/*「.a」に指定しても擬似要素は動かない→「.a::after」に指定すれば良い*/
2
3.a::after{
4 content: '';
5 animation: show_after 3s linear forwards;
6}
7
8@keyframes show_after{
9 99.9%{
10 content: '';
11 }
12 100%{
13 content: "[msg]";
14 color: #fff;
15 }
16}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/31 03:28
2018/08/31 03:55
2018/08/31 05:02