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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Q&A

解決済

1回答

1078閲覧

CSSのアニメーションについて

ryoo_chksl

総合スコア69

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

0グッド

0クリップ

投稿2018/10/24 12:37

html

1<div class="container"> 2 <p class="arrow">矢印</p> 3</div>

css

1 .container { 2 width: 200px; 3 height: 200px; 4 border: 1px solid #000; 5 position: relative; 6 } 7 .arrow::after { 8 content: "→"; 9 font-size: 40px; 10 right: 0; 11 position: absolute; 12 top: 50%; 13 transform: translateY(-50%); 14 animation: rolling 1s infinite ease-in-out; 15 } 16 @keyframes rolling { 17 0% {transform: translateX(-5px);} 18 50% {transform: translateX(0px);} 19 100% {transform: translateX(-5px);} 20 }

このコードで、animationプロパティを指定すると”→”が下に下がります。
なぜですか? また改善するにはどうすればいいでしょうか?

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

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

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

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

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

guest

回答1

0

ベストアンサー

原因は、.arrow::afterのtransform: translateY(-50%)をanimation: rollingのtransformで上書きしているから。
以下の修正

css

1 @keyframes rolling { 2 0% {transform: translateX(-5px) translateY(-50%);} 3 50% {transform: translateX(0px) translateY(-50%);} 4 100% {transform: translateX(-5px) translateY(-50%);} 5 }

または、

css

1 @keyframes rolling { 2 0% {transform: translate(-5px,-50%);} 3 50% {transform: translate(0px,-50%);} 4 100% {transform: translate(-5px,-50%);} 5 }

で治ります。

投稿2018/10/24 13:31

kaba

総合スコア314

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

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

ryoo_chksl

2018/10/24 14:20

.arrow::afterのtransformではtranslateYを指定していて、animationの方ではtranslateXを指定していますが、それでも競合してしまうのですね
kaba

2018/10/25 12:43

プロパティ名はtransformですから、上書きになります。 (translateXもtranslateYも値ですので)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問