ホームページ >ウェブフロントエンド >CSSチュートリアル >アニメーション方向プロパティの使用方法
アニメーション方向プロパティの使用方法
- 青灯夜游オリジナル
- 2019-01-31 11:42:575610ブラウズ
animation-direction 属性は、アニメーションを順番に逆方向に再生するかどうかを定義するために使用されます。アニメーションが複数回再生される場合、animation-direction の値をalternate に設定することで、アニメーションを逆方向に再生することができます。
#CSS3 アニメーション方向プロパティ
関数:そうすべきかどうかを定義します。順番にアニメーションを逆再生します。
構文:
animation-direction: normal|alternate;normal: デフォルト値。アニメーションは正常に再生されるはずです。 alternate: アニメーションは順番に逆方向に再生されます。
注: アニメーション方向の値が「alternate」の場合、アニメーションは通常、奇数番号 (1、3、5 など) と偶数番号 (2) で再生されます。 、4 など)、6 など)は逆方向に再生します。
注: アニメーションが 1 回だけ再生されるように設定されている場合、この属性は効果がありません。
#CSS3 アニメーション方向プロパティの使用例<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリング:
以上がこの記事の全内容ですが、皆様の学習のお役に立てれば幸いです。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの関連チュートリアルのコラムに注目してください。 ！ ！
以上がアニメーション方向プロパティの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。