ホームページ >ウェブフロントエンド >CSSチュートリアル >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におけるアニメーション技術の実装手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。