CSS3で回転アニメーションを実装する方法-CSSチュートリアル-php.cn

CSS3で回転アニメーションを実装する方法

青灯夜游

リリース： 2021-12-16 15:13:29

オリジナル

7896 人が閲覧しました

実装方法: 1. ステートメント「@keyframes アニメーション名 {50% {transform:rotate(回転角度);}」を使用して回転アニメーションを作成します; 2. 「要素 {アニメーション: アニメーション名時間」を使用しますinfinite;}" " ステートメントは、指定された要素に回転アニメーションを適用します。

CSS3で回転アニメーションを実装する方法

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

css3 は回転アニメーションを実装します

1. CSS3 を使用してアニメーションを実装したい場合は、アニメーションを使用する必要があります属性と「@keyframes」ルール。

@keyframes は、CSS アニメーションの期間の動作を定義し、単純なアニメーションを作成するために使用できる CSS3 のルールです。
アニメーションは、時間の経過とともに変化する CSS プロパティを表現するという点でトランジションに似ています。主な違いは、プロパティ値が変更されると (たとえば、ホバーでプロパティ値が変更される場合)、トランジションが暗黙的にトリガーされるのに対し、アニメーション化されたプロパティが適用されるとアニメーションが明示的に実行されることです。したがって、アニメーションでは、アニメーション化されたプロパティの明示的な値を示す必要があります。これらの値は、@keyframes ルールで指定されたアニメーションキーフレームによって定義されます。したがって、@keyframes ルールは、属性値が時間の経過とともにどのように変化するかを記述する、カプセル化された CSS スタイルルールのセットで構成されます。
次に、さまざまな CSS アニメーションプロパティを使用して、アニメーションの反復回数、開始値と終了値を交互に切り替えるかどうか、アニメーションなど、アニメーションのさまざまな側面を制御できます。実行するか一時停止するか。アニメーションによって開始時間が遅れることもあります。
構文:

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}

ログイン後にコピー

2.「@keyframes」ルールで transform:rotate (回転角度) を使用します。 回転アクションを制御します。

実装コード:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: pink;
				margin: 100px;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite; /* Safari and Chrome */
			}

			@keyframes mymove {
				50% {
					transform: rotate(360deg);
				}

			}

			@-webkit-keyframes mymove{  /* Safari and Chrome */
				50% {
					transform: rotate(360deg);
				}

			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

ログイン後にコピー

CSS3で回転アニメーションを実装する方法