-
1:ID:xf6EHK · 2017-07-10

#質問 css3でアニメーションつくってます。
下記のように書いてるんだけど、color01のキーフレームだけIE11とios系で描画できない…。
他の動きについてはちゃんと動くのです。
なにかこれはNGのような書き方をしているのでしょうか?
アドバイスいただければ幸いです。

※アニメーションをふたつ書いてるからだめなのかと思って片方外してみたけどだめだった。
※-msはもういらないはずだし、いるとしてもiosで動かないのが謎…。


.aaa{
color:#C96;
margin-top:-225px;
box-shadow: 0 1.75em 0 -0.4em;
animation: round 3s infinite linear,color01 6s infinite linear;
-webkit-animation: round 3s infinite linear,color01 6s infinite linear;
}
あっとkeyframes color01 {
0% {
color:#9c7dab;
}
25% {
color:#76ADB8;
}
50% {
color:#8DBC76;
}
75% {
color:#C4A67E;
}
100% {
color:#B87676;
}
}
あっと-webkit-keyframes color01 {
0% {
color:#9c7dab;
}
25% {
color:#76ADB8;
}
50% {
color:#8DBC76;
}
75% {
color:#C4A67E;
}
100% {
color:#B87676;
}
}

3 件の回答

2:ID: · 2017-07-10

@がでなかったので「あっと」って書いてます。

3:ID:t1/y7e · 2017-07-10

コピペしてiPhoneで見てみたけどちゃんと色が変化してるよ。
IE11は環境がないのでわからないです。

4:ID: · 2017-07-10

Re:3
確かにちゃんと動いていた!
私がさせたかったのはbox-shadowの色を変えることだったんだけど、Chrome以外だとcolorを変えても変わらないんだな…。
↓こういうのをやろうとしてて、box-shadowで円周上の●を描画してたんだけど、これみたいにパーツとして作成してみるよ。
https://throughthedark.withgoogle.com/

わざわざ試してくれてありがとう~!

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る