3

回転とフェードインを行う以下の CSS があり、問題なく動作します。回転/フェードのタイミングは希望どおりですが、回転/フェード間の時間を長くしたいと思います - 30秒程度です。継続時間を長くすると、回転/フェードが遅くなりすぎます。回転/スピンのタイミングを保持しながら、回転/フェードの間に 30 秒を許可するようにキーフレームを設定するにはどうすればよいですか? 検索しましたが、該当する回答が見つかりませんでした。どうもありがとうございました。

@-webkit-keyframes SomeName {
0%   { opacity:0; -webkit-transform: rotateY(180deg); }
50%  { opacity:0; -webkit-transform: rotateY(180deg); }
75%  { opacity:1; -webkit-transform: rotateY(0deg); }
100% { opacity:1; -webkit-transform: rotateY(0deg); }
}

#flipBox img.flippy {
-webkit-animation-name: SomeName;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;
}

ps 参考までに: これは webkit のみであるため、唯一のプレフィックスです。

4

1 に答える 1

0

ライブデモ

このコードを使用

animation:SomeName 5s;
-moz-animation:SomeName 5s; /* Firefox */
-webkit-animation:SomeName 5s; /* Safari and Chrome */
-o-animation:SomeName 5s; /* Opera */

これがあなたを助けることを願っています。

于 2013-03-12T13:27:14.777 に答える