CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3アニメーション@keyframes

キーフレームは、CSS3の中間アニメーションステップを制御します。

キーフレーム構文を使用して、アニメーションの高さ、幅、色、名前、および継続時間を示す例を見てみましょう。

@keyframes animation {
   from {background-color: pink;}
   to {background-color: green;}
}
div {
   width: 100px;
   height: 100px;
   background-color: red;
   animation-name: animation;
   animation-duration: 5s;
}

  1. CSS3でのキーフレームの定義

    CSS3でキーフレームアニメーションを作成するには、個々のキーフレームを定義します。キーフレームは、CSS3の中間アニメーションステップを制御します。 以下は、CSS3でキーフレームを定義するためのコードです- 例 <!DOCTYPE html> <html> <head> <style> body {    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } div {    width: 100px; &n

  2. WordPressコンテンツにクールなCSS3アニメーションを追加する方法

    ストーリーテリングの芸術は、ホモサピエンスが話すことができるずっと前に始まったかもしれません。それは私たちと共に進化し、利用可能なツールに適応します。ある世代から別の世代に口頭で伝えられ、受け継がれてきた物語は、手書きの本から大量印刷、デジタルワードプロセッシング、そして最近ではインターネットへの文字通りの進化を受け入れました。人類の進化の観点からは、現在利用可能なすべてのテクノロジーの可能性を十分に活用できていないように感じます。動画はすでに仮想世界支配キャンペーンを開始していますが、ウェブのコンテンツの大部分はまだテキストです。 最新のWebコンテンツはインタラクティブであり、古き良きプ