ホームページ > 記事 > ウェブフロントエンド > CSS3で回転アニメーションを実装する方法
CSS3で回転アニメーションを実装する方法
- 青灯夜游オリジナル
- 2021-12-16 15:13:297846ブラウズ
実装方法: 1. ステートメント「@keyframes アニメーション名 {50% {transform:rotate(回転角度);}」を使用して回転アニメーションを作成します; 2. 「要素 {アニメーション: アニメーション名 時間」を使用しますinfinite;}" " ステートメントは、指定された要素に回転アニメーションを適用します。
このチュートリアルの動作環境: 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>
(学習ビデオ共有: css ビデオ チュートリアル)
以上がCSS3で回転アニメーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。