찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3에서 여러 요소를 순차적으로 표시하는 효과를 구현하는 방법에 대해

CSS3에서 여러 요소를 순차적으로 표시하는 효과를 구현하는 방법에 대해

小云云
小云云원래의
2017-12-18 11:32:412902검색

CSS3는 CSS의 업그레이드 버전입니다. CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 이 글은 주로 CSS3를 사용하여 여러 요소를 순차적으로 표시하는 효과를 소개합니다. 필요한 친구들이 참고하면 도움이 될 것입니다.

위 그림과 같이 이러한 애니메이션 효과는 많은 이벤트 홍보 HTML5에서 자주 사용됩니다. 특히 연말이 다가옴에 따라 회사의 이벤트 페이지 작업으로 바쁜 학생도 있을 수 있습니다. 이런 소소한 기술을 익히는 것이 도움이 될 수도 있습니다.

CSS3에서는 키프레임과 결합된 애니메이션을 사용하여 요소에 다양한 애니메이션 효과를 추가합니다. 특정 애니메이션은 키프레임에 정의되어 애니메이션에 사용됩니다. 예를 들어 위에서 날아오는 애니메이션 효과를 정의할 수 있습니다. 

@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}

및 대상 요소의 애니메이션을 통해 애니메이션을 사용합니다. 

<p class="target topIn"></p>
.topIn {
  animation: topIn 1s ease;
}

이러한 방식으로 요소가 DOM에 처음 렌더링되면 위에서 아래로 변위 애니메이션 효과가 발생합니다. 물론, 이 효과는 우리가 원하는 것이 아닙니다. 종종 애니메이션에 0에서 1까지의 투명도 그라데이션을 추가하기도 합니다. 

@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}

또한 요소의 표시 타이밍을 제어할 수 있기를 원합니다. 어떻게 해야 할까요? 더 간단한 방법은 애니메이션 효과가 필요할 때만 대상 요소에 애니메이션을 제어하는 ​​클래스 스타일을 추가하는 것입니다. 

btn.addEventListener(&#39;click&#39;, function() {
  document.querySelector(&#39;.target&#39;).classList.add(&#39;topIn&#39;);
}, !1);

하지만 여기에는 문제가 있습니다. 나는 그것을 실천한 친구들이 이미 이것을 발견했다고 믿습니다. 우리는 장면에 들어가기 전에 요소가 보이지 않는 상태에 있을 것으로 예상합니다. 하지만 위의 작업만 수행하면 애니메이션이 시작되기 전에 해당 요소를 볼 수 있습니다. 그렇다면 어떻게 해야 할까요?

요소에 display: none 또는 visible: Hidden을 추가하는 것을 쉽게 생각할 수 있습니다. 그러나 display: none 이후에는 요소가 공간을 차지하지 않습니다. 따라서 이 경우 페이지 레이아웃에 혼란이 발생할 수 있습니다. 따라서 시작하기 전에 요소에 새 클래스를 추가합니다. 

.aninode {
  visibility: hidden;
}

요소를 표시하려면 새 클래스를 추가하세요. 

.animated .aninode {
  visibility: visible;
}

애니메이션 효과를 제어하는 ​​클래스도 CSS에서 약간의 조정이 필요합니다. 

.animated .topIn {
  animation: topIn 1s ease;
}

이 방법의 장점은 효과를 얻으려면 클래스에 애니메이션만 추가하면 된다는 것입니다. 예제 데모의 전체 코드는 다음과 같습니다. 

<p class="container">
  <p class="target aninode leftIn"></p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 100px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.target {
  width: 100px;
  height: 100px;
  background: orange;
  border-radius: 4px;
  margin: 20px 0;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation: leftIn 1s ease;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { 
    transform: translateY(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateY(0px);
    opacity: 1; 
  }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

Demo는 다음과 같이 표시됩니다. 

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/NXKrPg/&#39;>NXKrPg</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen 데모 주소

하지만 이는 우리가 원하는 효과에 조금 부족한 것 같습니다. 계속 생각해보세요. 우선, 다음 요소가 이전 요소보다 늦게 나타나도록 하려면 지연 시간을 설정하는 클래스가 많이 있어야 합니다. 

.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}

animation-fill-mode: backs!important; 목적은 요소가 나타나기 전에 요소의 투명도를 0으로 유지하는 것입니다. 애니메이션을 추가한 후 요소가 바로 표시되는 것을 방지합니다.

새 클래스에서 애니메이션 약어를 사용할 때 animation-fill-mode 속성을 덮어쓰는 것을 방지하기 위해 !important를 추가했습니다. 여기에 !important를 쓰지 않으면 topIn과 같은 애니메이션 클래스에서는 축약형을 사용할 수 없습니다.

이후에는 위의 코드를 CSS에 추가하고 HTML을 일부 변경하면 원하는 효과를 얻을 수 있습니다. 

See the Pen <a href=&#39;https://codepen.io/yangbo5207/pen/mpbEEE/&#39;>mpbEEE</a> by Ormie (<a href=&#39;https://codepen.io/yangbo5207&#39;>@yangbo5207</a>) on <a href=&#39;https://codepen.io&#39;>CodePen</a>.

codepen 데모 주소

전체 코드는 다음과 같습니다. 

<p class="container">
  <p class="targets aninode">
      <p class="item leftIn">春晓</p>
      <p class="item leftIn delay200">春眠不觉晓</p>
      <p class="item leftIn delay400">处处蚊子咬</p>
      <p class="item leftIn delay600">夜来风雨声</p>
      <p class="item leftIn delay800"><此处请留下你们的才华></p>
  </p>
  <button class="btn show">show</button>
  <button class="btn hide">hide</button>
</p>
.container {
  width: 200px;
  margin: 0 auto;
}
.aninode {
  visibility: hidden;
}
.animated .aninode {
  visibility: visible;
}
.targets {
  margin: 20px 0;
}
.targets .item {
    border: 1px solid #ccc;
    margin: 10px 0;
    line-height: 2;
    padding: 2px 6px;
    border-radius: 4px;
}
.animated .topIn {
  animation: topIn 1s ease;
}
.animated .leftIn {
  animation-name: leftIn;
  animation-duration: 1s;
}
.btn {
  width: 100px;
  height: 30px;
  border: 1px solid #ccc;
  outline: none;
  transition: 0.1s;
}
.btn:active {
  border: none;
  background: orange;
  color: #fff;
}
@keyframes topIn {
  from { transform: translateY(-50px) }
  to { transform: translateY(0px) }
}
@keyframes leftIn {
  from { 
    transform: translateX(-50px);
    opacity: 0; 
  }
  to { 
    transform: translateX(0px);
    opacity: 1; 
  }
}
.delay200 {
    animation-delay: 200ms;
    animation-fill-mode: backwards!important;
}
.delay400 {
    animation-delay: 400ms;
    animation-fill-mode: backwards!important;
}
.delay600 {
    animation-delay: 600ms;
    animation-fill-mode: backwards!important;
}
.delay800 {
    animation-delay: 800ms;
    animation-fill-mode: backwards!important;
}
var show = document.querySelector(&#39;.show&#39;);
var hide = document.querySelector(&#39;.hide&#39;);
var container = document.querySelector(&#39;.container&#39;);
show.addEventListener(&#39;click&#39;, function() {
  container.classList.add(&#39;animated&#39;);
}, !1);
hide.addEventListener(&#39;click&#39;, function() {
  container.classList.remove(&#39;animated&#39;);
}, !1);

js의 로직은 어떤 식으로든 변경되지 않은 것으로 나타났습니다. 적절한 경우 애니메이션을 추가/제거하기만 하면 됩니다.

이스터 에그:

실제로 우리는 더 골치 아픈 일에 직면하게 될 것입니다. 수업 작성을 미루는 것입니다. 어떤 시차가 사용될지, 얼마나 많은 요소가 사용될지 알 수 없으므로 모두 손으로 작성하면 작업을 반복하기가 너무 번거롭습니다. 따라서 js를 사용하여 동적으로 삽입할 수 있습니다. 코드는 다음과 같습니다. 

const styleSheet = getSheet();
var delay = 100;
while (delay < 10000) {
    styleSheet.insertRule(`.animated .delay${delay}{ animation-delay: ${delay}ms; animation-fill-mode: backwards; }`, styleSheet.cssRules.length);
    delay += delay < 3000 ? 100 : 1000;
}
function getSheet() {
    var sheets = document.styleSheets;
    var len = sheets.length;
    for(var i = 0; i <= len; i++) {
        var sheet = sheets.item(i);
        try {
            if (sheet.cssRules) {
                return sheet;
            }
        } catch(e) {} 
    }
    var style = document.createElement(&#39;style&#39;);
    style.type = "text/css";
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(style);
    return style.sheet;
}

관련 권장 사항:

배열 끝에 하나 이상의 요소를 삽입하는 php 함수 array_push()

JavaScript는 배열 끝에 하나 이상의 요소를 추가합니다. 배열을 반환하고 새로운 것을 반환합니다 길이 메소드 push()

PHP는 여러 요소의 순열과 조합을 출력합니다_PHP 튜토리얼

위 내용은 CSS3에서 여러 요소를 순차적으로 표시하는 효과를 구현하는 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：css3는 시퀀스_css3_CSS_웹페이지 제작에서 여러 요소를 표시하는 효과를 실현합니다.다음 기사：css3는 시퀀스_css3_CSS_웹페이지 제작에서 여러 요소를 표시하는 효과를 실현합니다.

관련 기사

더보기