記事ディレクトリ
1.CSS3アニメーションプロパティ
1. CSS3 の一般的なアニメーション プロパティの概要
CSS3 のアニメーションでは、@keyframes キーワードを使用してアニメーションを定義します。
@keyframes element-move {
0% {
transform: translateX(500px); }
100% {
transform: translateX(0); }
}
@keyframes で定義されたアニメーションでは、アニメーションの実行を制御する一連の CSS プロパティを設定できます。共通のプロパティは次のとおりです (以下のアニメーション プロパティは、アニメーションを実行するラベル要素のスタイルで設定されます)
- anime-name 属性: @keyframes でアニメーションを定義するときにアニメーション名を設定します。これは通常、アニメーションを呼び出すラベル要素で使用されます。アニメーションが実行するキー フレームを定義するために使用されます。この属性はアニメーションを呼び出すときに設定する必要があります;
div {
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
}
- anime-duration 属性: CSS3 アニメーションの継続時間を設定します。デフォルトは 0 です。
- 単位は秒です。
- 単位はミリ秒msにすることもできます。
div {
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
}
- anime-timing-function 属性:アニメーションの速度変化曲線を反映するアニメーションの「時間関数」を設定します。一般的な値は次のとおりです。
- 線形
- 出入りが楽になる
- ease-in 缓入
- イーズアウト
div {
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
}
- アニメーション遅延属性:アニメーションの遅延時間を設定し、指定された時間だけ遅延させてからアニメーションを実行します。
- 単位は秒です。
- 単位はミリ秒msにすることもできます。
div {
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
}
- anime-iteration-count 属性: CSS3 アニメーションの実行の繰り返し数を設定します。
- 2 、100 など、特定の時間を設定できます。
- 無限の時間を設定すると、無限のプロパティ値を設定できます。
div {
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
}
- anime-direction 属性:アニメーションの再生方向を設定します。一般的な値は次のとおりです。
- 普通に普通に遊ぶ
- 逆方向に逆再生する
- 交互に交互に再生する
div {
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
}
- anime-fill-mode 属性:アニメーションの再生後の状態を設定します。一般的な値は次のとおりです。
- none は要素のスタイルを変更しません
- アニメーションの最後でスタイルを維持します。
- reverse はアニメーションの開始時のスタイルを維持し、開始点に戻ります。
div {
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
}
- anime-play-state 属性:アニメーションの再生状態を設定します。一般的な値は次のとおりです。
- ランニング
- 一時停止した
div {
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
2. コード例 - CSS3 の共通アニメーション プロパティの使用
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 动画属性</title>
<style>
@keyframes element-move {
0% {
transform: translateX(500px);
}
100% {
transform: translateX(0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
実行効果: Web ページの実行後、下の小さな四角形が無限ループで前後に移動します。
2、CSS3 アニメーション プロパティの省略表現
1. CSS3 アニメーション プロパティの短縮構文
CSS3 アニメーション プロパティの短縮構文:
animation: 动画名称 持续时间 运动曲线 开始时间 播放次数 播放方向 结束状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
上記の略語のさまざまな属性の間は、スペースを使用して区切ります。
アニメーション プロパティのうち、animation-play-state プロパティを除く他のアニメーション プロパティは、アニメーション プロパティに短縮できます。
anime-play-state 属性はアニメーションの開始と一時停止を制御します。これは通常、コード ロジックに従って個別に制御する必要があります。
アニメーション短縮属性の各属性の対応関係は次のとおりです。
- アニメーション名:アニメーション名 、 @keyframes アニメーション名;
- 期間: anime-duration 、アニメーションがサイクルを実行するのにかかる時間 (秒/ミリ秒)。
- モーション カーブ: anime-timing-function 、アニメーション実行カーブ、デフォルトのイーズはイーズ インとイーズ アウトです。
- 開始時間:アニメーション遅延、アニメーションの実行が開始される時間 (秒/ミリ秒単位)。
- 再生回数: anime-iteration-count 、アニメーションの再生回数、デフォルトは 1 、無限ループ再生は無限です。
- 再生方向:アニメーションの方向、アニメーションの再生方向、順方向/逆方向/交互。
- 終了状態: anime-fill-mode 、アニメーションの開始と終了後の状態。
2. アニメーション ショートハンド アニメーション プロパティ プロンプト
アニメーションの省略表現のアニメーション プロパティを記述するときに、順序を覚えていない場合は、anim と入力した後に次のヒントを見つけることができます。
次に、最初のプロンプト位置で Enter キーを押して、次のコードを生成します。
animation: name duration timing-function delay iteration-count direction fill-mode;
次に、上記のコード プロンプトに従って各アニメーション プロパティ値を入力します。
3. アニメーションプロパティの短縮形と原形の比較
アニメーション プロパティを設定するために必要な元のコード:
/* 设置动画名称 之前使用 @keyframes 定义的 element-move 动画 */
animation-name: element-move;
/* 设置动画执行时间 2 秒 */
animation-duration: 2s;
/* 设置动画运动曲线 ease 缓入缓出 */
animation-timing-function: ease;
/* 设置动画开始时间 1 秒后开始 */
animation-delay: 1s;
/* 设置动画执行次数 无限循环播放 */
animation-iteration-count: infinite;
/* 设置动画播放方向 交替播放 一次正向一次反向 */
animation-direction: alternate;
/* 设置动画执行完毕后的状态 回到起始状态 */
animation-fill-mode: backwards;
アニメーションの短縮表現を使用すると、たった 1 行のコードで実現できます。
/* 使用简写形式设置动画属性 */
animation: element-move 2s ease 1s infinite alternate backwards;
4. コード例 - CSS3 アニメーション プロパティの簡単な例
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 动画属性</title>
<style>
@keyframes element-move {
0% {
transform: translateX(500px);
}
100% {
transform: translateX(0);
}
}
div {
width: 100px;
height: 100px;
background-color: pink;
/* 使用简写形式设置动画属性 */
animation: element-move 2s ease 1s infinite alternate backwards;
/* 设置动画当前的播放状态 运行状态 */
animation-play-state: running;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
実行結果: Web ページ内の小さな正方形が左右に往復します。
