CSS3で画像が消えるアニメーション効果を実現する方法-フロントエンドQ&A-php.cn

CSS3で画像が消えるアニメーション効果を実現する方法

青灯夜游

リリース： 2022-03-18 16:19:47

オリジナル

4501 人が閲覧しました

実装方法:「@keyframesアニメーション名{}」ルールと「opacity:transparency;」ステートメントを使用して絵が消えるアニメーションを作成します; 2.「絵要素{opacity:0;アニメーション:アニメーション」を使用しますname time 1; }" ステートメントを使用して、絵要素に絵が消えるアニメーションを適用できます。

CSS3で画像が消えるアニメーション効果を実現する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、アニメーション属性、「@keyframes」ルール、不透明度属性を使用して、画像が消えるアニメーション効果を実現できます。

@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。

@keyframes を使用してアニメーションのアクションを定義します。その後、さまざまな CSS アニメーションプロパティを使用して、アニメーションの反復回数、開始値と終了値を切り替えるかどうかなど、アニメーションのさまざまな側面を制御できます。、アニメーションを実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。

opacity 属性は要素の透明度を制御します。

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			@keyframes mymove {
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}

			@-webkit-keyframes mymove{ /* Safari and Chrome */
			
				0% {
					opacity: 1;
				}
				100% {
					opacity: 0;
				}
			}
			img {
				opacity: 0;
				animation: mymove 3s 1;
				/* Safari and Chrome */
				-webkit-animation: mymove 3s 1;
			}
		</style>
	</head>
	<body>

		<img  src="img/1.jpg"    style="max-width:90%" / alt="CSS3で画像が消えるアニメーション効果を実現する方法" >

	</body>
</html>

ログイン後にコピー

CSS3で画像が消えるアニメーション効果を実現する方法