ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSS3で数秒後にアニメーションを再生するように設定する方法
CSS3で数秒後にアニメーションを再生するように設定する方法
- 青灯夜游オリジナル
- 2022-03-18 16:33:283226ブラウズ
CSS3 では、アニメーション遅延属性を使用して、数秒後にアニメーションが再生されるように設定できます。この属性は、オブジェクト アニメーションの遅延時間、つまりアニメーションが開始されるまでの待ち時間を設定できます。 、秒またはミリ秒で指定します。構文「animation -lay: value unit;」。単位は秒 (s) またはミリ秒 (ms) です。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
CSS3 では、アニメーション遅延属性を使用して、数秒後にアニメーションが再生されるように設定できます。
アニメーション遅延プロパティは、オブジェクト アニメーションの遅延時間を任意に取得または設定できます。つまり、アニメーションの開始時期を定義します。
構文:
animation-delay: time;
time: アニメーションを開始するまでの待機時間を秒またはミリ秒で定義します (値の単位は秒またはミリ秒です) ms) ;デフォルト値は 0 です。
ヒント: 負の値は許可されます。-2 を指定すると、アニメーションがすぐに開始されますが、アニメーションに入るまでの 2 秒がスキップされます。
例: アニメーションを開始するまで 5 秒遅延します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation: mymove 5s infinite;
animation-delay: 5s;
/*Safari and Chrome*/
-webkit-animation: mymove 5s infinite;
-webkit-animation-delay: 5s;
}
@keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
@-webkit-keyframes mymove
/*Safari and Chrome*/
{
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
(学習ビデオ共有: css ビデオ チュートリアル , Web フロントエンド )
以上がCSS3で数秒後にアニメーションを再生するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。