質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2125閲覧

keyframe animationでのborder-radiusの変化のタイミングとテキストの追加

maguzo

総合スコア57

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/08/30 23:28

下記のようなアニメーションで、最終的な段階でborder-radiusを適用したいのですが
アニメーションの序盤の段階から適用されてしまいます。
具体的に.aについてborder-radius:の右上と右下が開始時に丸くなってしまっているのが確認できます。

1)この問題が生じてしまう理由と解決方法をご教示願えますでしょうか?

2)またJSFiddleでは滑らかに動くのですが、自身の構築サイトではカクカクする現象が生じているのですが、これは読み込むべきページの量によってCSS上どうしても生じてしまい得る現象なのでしょうか?

3)また、最終的にaが100%になった際にaにテキストを表示させたい(例えば100%など)のですが、keyframe animationでは(例えば100%のタイミングで)after content等の擬似要素を設定することができませんでした。他に自分が思いつく方法としてはJQueryでsetTimeoutで同じ秒数遅らせてappendするくらいしか思いつかないのですが、必ずしもCSSで設定した3SとJQueryの setTImeout3000が連動して動作することが保証されないとも思いますでの、良い方法があればアドバイスを願います。

重ねての質問恐れ入りますが
よろしくお願い申し上げます。

JSFiddle

HTML

1<div class="main"> 2 <div class="a">A</div> 3 <div class="b">B</div> 4</div>

CSS

1.main{ 2 width:300px; 3 height:50px; 4 display:flex; 5} 6.a{ 7 background:blue; 8 width:50%; 9 border-radius:5px 0px 0px 5px; 10} 11.b{ 12 background:red; 13 width:50%; 14} 15 16@keyframes my_anime1 { 17 0% { 18 width: 50%; 19 } 20 20% { 21 width: 60%; 22 } 23 40% { 24 width: 70%; 25 } 26 60% { 27 width: 80%; 28 } 29 80% { 30 width: 90%; 31 } 32 100% { 33 width: 100%; 34 border-radius:0px 5px 5px 0px;//100%になる前から適用されてしまう 35 } 36} 37 38@keyframes my_anime2 { 39 0% { 40 width: 50%; 41 } 42 20% { 43 width: 40%; 44 } 45 40% { 46 width: 30%; 47 } 48 60% { 49 width: 20%; 50 } 51 80% { 52 width: 10%; 53 } 54 100% { 55 width: 0%; 56 border-radius:0px 0px 0px 0px; 57 } 58} 59 60.a{ 61 animation:my_anime1 3s linear forwards; 62} 63 64.b{ 65 animation:my_anime2 3s linear forwards; 66}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

本題に入る前に,すこしお話を

まず@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アニメを見れば,.aborder-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 01:02

編集2018/08/31 01:26
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/08/31 03:28

コメントをいただき、誠にありがとうございます。 1) セレクタの統合について、承知をいたしました。以後気をつけてコーディングしてみようと思います。 2) コメントアウトについて、失礼いたしました。 3) 段階的なanimationの指定ですが、実際の構築サイトではwidhが順番に左に寄ったり右に寄ったりやや複雑な動きをするのでわけたものを段階を残して他を簡素化して提示させていただきました。結果として、段階を分けることでスムーズな動きにならない可能性が生じることが分かったため、得るものはあったのですが、これは実装する中で良い方法を模索してみようと思います。 4) border-radiusについても理解することができました。私自信が解釈していたkeyframe animationは実際の仕様とは異なっていたようですね。直前かそれまでの過程で指定することで解決いたしました。 5)animationを使った場合の疑似classでcontentの設定の仕方をご教示いただきありがとうございます。無事に設定することができました。下記のmacaron_xxx様のvisibleとアニメーションの組み合わせも非常に目からウロコであったため、いずれも実装してみてどちらかを検討してみようと思います。 丁寧なご解説に改めて深い御礼を申し上げます。
liveasnotes

2018/08/31 03:55

>左に寄ったり右に寄ったりやや複雑な動き 動画編集やアニメーション製作でもそうですが,実は,複雑な動きは誤魔化しやすいです 人間の視界は,それこそ@keyframesのように,中間を上手く埋め合わせて脳内で処理・描画されます なので,左右に複雑に動くだけなら,工夫次第で何とかなります ただ,カクツキだけでなく,こういう問題が発生することもあるようです 「cssでアニメーションさせた要素に残像が残る」https://teratail.com/questions/78551 遭遇率は低めですが,頭の片隅に置いておいても良いかもしれません
maguzo

2018/08/31 05:02

ご助言を頂きありがとうございます。 様々なパターンで且つ各ブラウザで動作を手探りで検証してみようとおもいます! 残像の件も備忘のためクリップさせて頂きました。 宜しくお願い申し上げます。
guest

0

.a{ background:blue; width:50%; border-radius:5px 0px 0px 5px; }

そもそも右上と右下に5pxと指定されているので、丸くなるのは当然です。

2)通常は読み込みと実行はわけられるので、かくつくのは別のCSSが関与していると考えられそうですが、もとのコードがわからないので、なんとも。

3)例えば、こんな風にしてみれば実現できます。

HTML

1<div class="a">A 2 <div class="c">C</div> 3</div>

CSS

1.c { 2 visibility: hidden; 3 animation:my_anime3 0s linear 3s forwards; 4} 5@keyframes my_anime3 { 6 100% { 7 visibility: visible; 8 } 9}

投稿2018/08/31 00:02

macaron_xxx

総合スコア3191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maguzo

2018/08/31 03:32

コメントをいただき、ありがとうございます。 border-radius:5px 0px 0px 5px;について >そもそも右上と右下に5pxと指定されているので、丸くなるのは当然です。 という点は順番が左上、右上、右下、左下のハズなので誤まりでしょうか?それともまた異なる視点での ご指摘でしょうか?念のために確認させていただきました。 http://www.htmq.com/css3/border-radius.shtml また、時間差のコメントの記載方法についてvisibleのご助言ありがとうございます。 すみません、本当に率直にな、なるほど!と感動いたしました。まだまだ、cssに明るくなく、勉強することばかりですが、このようなアイデアを次ぎにも活かしていきたいと思います。 改めて、深謝申し上げます。
macaron_xxx

2018/08/31 03:48

あ、左でしたね。 ごめんなさい。
maguzo

2018/08/31 04:56

とんでもないです。 コメントを頂きありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問