アニメーション方向プロパティの使用方法-CSSチュートリアル-php.cn

アニメーション方向プロパティの使用方法

青灯夜游

リリース： 2019-01-31 11:42:57

オリジナル

5612 人が閲覧しました

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 サイトの関連チュートリアルのコラムに注目してください。！！