この記事はCSS3を使ってサイドバーの展開と折りたたみアニメーションを実現する方法を主に紹介し、サンプルコードも添付しています。非常に詳しく書かれているので、必要な友人に勧めます。
@keyframes
ルールはアニメーションの作成に使用されます。
@keyframes で特定の CSS スタイルを規定することで、現在のスタイルから新しいスタイルに徐々に変化するアニメーション効果を作成できます。
@keyframes でアニメーションを作成する場合は、セレクターにバインドしてください。それ以外の場合は、アニメーション効果をバインドしてください。生産されません。
アニメーションは、少なくとも次の 2 つの CSS3 アニメーション プロパティを指定することでセレクターにバインドできます:
アニメーションの名前の指定
アニメーションの継続時間の指定
アニメーション
アニメーション プロパティは、アニメーション プロパティを設定するための短縮形プロパティです。 . :
animation-name: @keyframes アニメーションの名前を指定します。
animation-duration: アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは 0 です。
animation-timing-function: アニメーションの速度カーブを指定します。デフォルトは「簡単」です。
アニメーション遅延: アニメーションがいつ開始されるかを指定します。デフォルトは 0 です
animation-iteration-count: アニメーションが再生される回数を指定します。デフォルトは 1 です。
animation-direction: 次のサイクルでアニメーションを逆再生するかどうかを指定します。デフォルトは「通常」です。
animation-fill-mode: オブジェクトのアニメーション時間外の状態を指定します
サイドバーの実装
/* 动画定义 */ @-webkit-keyframes move_right { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateX(120px); transform: translateX(120px); } } @keyframes move_right { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateX(120px); transform: translateX(120px); } } @-webkit-keyframes move_left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-120px); transform: translateX(-120px); } } @keyframes move_left { from { opacity: 1; } to { opacity: 0; -webkit-transform: translateX(-120px); transform: translateX(-120px); } } @-webkit-keyframes move_up { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateY(-250px); transform: translateY(-250px); } } @keyframes move_up { from { opacity: 0; } to { opacity: 1; -webkit-transform: translateY(-250px); transform: translateY(-250px); } }
/* 动画绑定 */ .move_right { -webkit-animation-name : move_right; animation-name : move_right; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .move_left { -webkit-animation-name : move_left; animation-name : move_left; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .move_up { -webkit-animation-name : move_up; animation-name : move_up; -webkit-animation-duration : 1s; animation-duration : 1s; -webkit-animation-iteration-count : 1; animation-iteration-count : 1; -webkit-animation-fill-mode : forwards; animation-fill-mode : forwards; } .fadeIn { -webkit-transform : translateX(120px); transform : translateX(120px); opacity: 1; } .fadeInUp { -webkit-transform : translateY(-250px); transform : translateY(-250px); opacity: 1; -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; transition :transform .2s ease-out, opacity .2s ease-out; } .fadeOutLeft { -webkit-transform : translateX(-120px); transform : translateX(-120px); opacity: 0.0; -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out; transition :transform .2s ease-out, opacity .2s ease-out; }
html
<!doctype html> <html lang="en" class="fullHeight"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" type="text/css" href="sidebar.css"> </head> <body class="fullHeight"> <p class='sidebar fullHeight'>sidebar</p> <p class="controller"> <p> <button onclick="fadeIn()">淡进</button> <button onclick="fadeOut()">淡出</button> </p> <p> <button onclick="fadeInUp()">向上淡进</button> <button onclick="fadeOutLeft()">向左淡出</button> </p> </p> <script src="sidebarEffects.js"></script> </body> </html>
JSを追加
<script> var sidebarEl = document.querySelector(".sidebar"); function fadeIn (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '0px'; sidebarEl.classList.add('move_right'); } function fadeOut (e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); } function fadeInUp(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '250px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_up'); } function fadeOutLeft(e) { sidebarEl.className = 'sidebar fullHeight'; sidebarEl.style.top = '0px'; sidebarEl.style.left = '120px'; sidebarEl.classList.add('move_left'); } </script>
上記はCSS3を使用してサイドバーアニメーション効果を作成する方法です。コンテンツとコードはここにあるので、友人は自分のプロジェクトのニーズに応じてそれを改善したり美化したりすることができます。
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
CSS3 でローディングサークルアニメーションを描画する方法
以上がCSS3 はサイドバーの展開と折りたたみのアニメーションを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。