집 > 기사 > 웹 프론트엔드 > CSS3는 사이드바 확장 및 축소 애니메이션을 구현합니다.

CSS3는 사이드바 확장 및 축소 애니메이션을 구현합니다.

不言원래의: 2018-06-12 13:58:144474검색

이 글은 주로 CSS3를 사용하여 사이드바 확장 및 축소 애니메이션을 구현하는 방법을 소개하고 샘플 코드를 첨부합니다. 매우 상세하여 필요한 친구에게 권장됩니다.

@keyframes

규칙은 애니메이션을 만드는 데 사용됩니다.

@keyframes에 특정 CSS 스타일을 규정하면 현재 스타일에서 새로운 스타일로 점진적으로 변경되는 애니메이션 효과를 만들 수 있습니다.

@keyframes에서 애니메이션을 만들 때는 선택기에 바인딩하세요. 그렇지 않으면 애니메이션 효과가 적용됩니다. 생산되지 않습니다.

적어도 다음 두 가지 CSS3 애니메이션 속성을 지정하여 애니메이션을 선택기에 바인딩할 수 있습니다.

애니메이션 이름 지정
애니메이션 지속 시간 지정
animation
animation 속성은 애니메이션 속성 설정을 위한 약어 속성입니다. :

animation-name: @keyframes 애니메이션의 이름을 지정합니다.
animation-duration: 애니메이션이 한 주기를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다.
animation-timing-function: 애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다.
animation-delay: 애니메이션이 시작되는 시기를 지정합니다. 기본값은 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=&#39;sidebar fullHeight&#39;>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 = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;0px&#39;;
     sidebarEl.classList.add(&#39;move_right&#39;);
 }
 function fadeOut (e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 function fadeInUp(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;250px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_up&#39;);
 }
 function fadeOutLeft(e) {
     sidebarEl.className = &#39;sidebar fullHeight&#39;;
     sidebarEl.style.top = &#39;0px&#39;;
     sidebarEl.style.left = &#39;120px&#39;;
     sidebarEl.classList.add(&#39;move_left&#39;);
 }
 </script>

위는 CSS3를 사용하여 사이드바 애니메이션 효과를 만드는 방법입니다. 콘텐츠와 코드가 여기에 있으므로 친구들은 자신의 프로젝트 요구 사항에 따라 이를 개선하고 아름답게 만들 수 있습니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3는 사이드바 확장 및 축소 애니메이션을 구현합니다.

관련 기사