CSS3におけるアニメーション技術の実装手順

CSS3 でアニメーション効果を実現する必要がある場合、transform-origin、transition、transition-lay、transition-timing-function の 3 つのテクノロジが使用されます。今日は、アニメーション効果を実現する方法を明確に説明します。

1.transform-origin

CSS 変換の原点、デフォルトはオブジェクトの中心点です。 transform-origin は 2 つのパラメータを受け入れます。これらのパラメータは、パーセンテージ、em、px などの特定の値、または left、right、center、top、middle、bottom などのキーワードにすることができます。

例:

transform-origin: 右上;-o-transform-origin: 右上;-moz-transform-origin: 右上;-webkit-transform-origin: 右上;

transform-origin: 0 0;-o-transform-origin: 0 0;-moz-transform-origin: 0 0;-webkit-transform-origin: 0 0;

transform-origin: 0 100%;-o-transform-origin: 0 100%;-moz-transform-origin: 0 100%;-webkit-transform-origin: 0 100%;

transform-origin: 50% 100%;-o-transform-origin: 50% 100%;- moz -transform-origin: 50% 100%;-webkit-transform-origin: 50% 100%;

2. Transition--Transition

1.transition-property: 変形アニメーションの CSS プロパティ名を定義します。 none|all|CSS プロパティ リストを指定できます。

例:

transition-property:background-color;-o-transition-property:background-color;-moz-transition-property:background-color;-webkit-transition-property:background-color;

2 .transition-duration: トランジション アニメーションの継続時間を定義します。

例:

transition-duration: 3s;-o-transition-duration: 3s;-moz-transition-duration: 3s;-webkit-transition-duration: 3s;

3.transition-lay: トランジションを定義します。アニメーションの遅延時間。

例:

transition-lay: 3s;-o-transition-delay: 3s;-moz-transition-delay: 3s;-webkit-transition-delay: 3s;

4.transition-timing-function:定義 トランジションアニメーションの効果。

値は次のとおりです:

ease: 緩和効果。

イーズイン: 段階的な効果。

イーズアウト: フェード効果。

イーズインアウト: フェードインおよびフェードアウト効果。

リニア: 線形効果。

cubic-bezier: 特別な 3 次ベジェ曲線効果。 3次ベジェ(0.3, 0, 0.5, 1.0)。

例:

transition-timing-function: 線形; -o-transition-timing-function: 線形; -webkit-transition-timing-function: 線形;

三、アニメーション

1.animation-name: アニメーション名。

2.animation-duration: アニメーション時間。

3.animation-timing-function: アニメーションの再生メソッド。

4.animation-delay: アニメーションの開始時間。

5.animation-iteration-count: 再生回数。無限とは無限の回数を意味します。 。

6.animation-direction: アニメーションの再生方向。通常 - アニメーションの各サイクルが前進します。交互 - 偶数回前進し、奇数回後退します。

例:

div {
-webkit-transform-style: preserve-3d;
-webkit-animation-name: ani;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
/* 下面调用动画 */
@-webkit-keyframes ani {
0% {
-webkit-transform: rotateX(0deg);
}
25% {
-webkit-transform: rotateX(180deg);
}
50% {
-webkit-transform: rotateX(360deg);
}
75% {
-webkit-transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(360deg);
}

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS3、background-size属性の詳細な紹介

CSS3、translate属性の詳細な紹介

CSS3、filter属性の詳細な紹介

以上がCSS3におけるアニメーション技術の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。