CSS中的技能栏[重复]

此问题在此处已有答案：

Animation in CSS（2个答案）
两年前关闭了。
我的动画有一点不一致，我试图修复它，但它没有工作，即使它应该是简单的。
这是密码：

//Skills Animation On View
document.addEventListener("DOMContentLoaded", function(event) {

// THIS FUNCTION GETS CALLED WHENEVER A SPAN18 ELEMENT (OR ELEMENTS) COME INTO OR GO OUT OF VIEW
      function callback (observations, observer) {
        observations.forEach(observation => {
          if (observation.isIntersecting) { //IF IT'S IN VIEW
            observation.target.classList.add('animated');
            observation.target.classList.add('animated1');
          }
          else {
            observation.target.classList.remove('animated');
            observation.target.classList.remove('animated1');
          }      
       });
     }
      
      // CREATE AN INTERSECTION OBSERVER
      let options = {
         root: null, //null means it will observe on the viewport
         rootMargin: '0px',
         threshold: 1.0 //1 means the whole element needs to be viewable before we animate it
      }

      let observer = new IntersectionObserver(callback, options);
      
      // NOW PUT THE OBSERVER ON EACH OF THE ELEMENTS WE WANT TO ANIMATE WHEN IT'S IN VIEW
      let spans = document.querySelectorAll('span18');
      for (let i=0; i< spans.length; i++) {
        observer.observe(spans[i]); 
      }
      let spans1 = document.querySelectorAll('span19');
      for (let a=0; a< spans1.length; a++) {
        observer.observe(spans1[a]); 
      }
});

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body20{
  height: 100%;
  place-items: center;
  background: transparent;
}
::selection{
  color: #fff;
  background: black;
}
.skill-bars{
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0,0,0,0.2);
  border-radius: 10px;
}
.skill-bars .bar{
  margin: 20px 0;
}
.skill-bars .bar:first-child{
  margin-top: 0px;
}
.skill-bars .bar .info{
  margin-bottom: 5px;
}
.skill-bars .bar .info span18{
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100%{
    opacity: 1;
  }
}
.skill-bars .bar .progress-line{
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.05),
              0 1px rgba(255,255,255,0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
@keyframes animate {
  100%{
    transform: scaleX(1);
  }
}

.bar .progress-line span18{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
/* SET THE ANIMATED CLASS TO GET IT TO ANIMATE */
.bar .progress-line span18.animated{
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}
.bar .progress-line.html span18{
  width: 84%;
}
.bar .progress-line.css span18{
  width: 76%;
}
.bar .progress-line.jquery span18{
  width: 91%;
}
.bar .progress-line.python span18{
  width: 59%;
}
.bar .progress-line.mysql span18{
  width: 70%;
}
/* ADDED ANIMATED HERE SO ANIMATES ONLY WHEN IN THE VIEWPORT */
.progress-line span18.animated::before{
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
    animation: showText2 0.5s 1.5s linear forwards;
}
.progress-line span18.animated::after{
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}
@keyframes showText2 {
  100%{
    opacity: 1;
  }
}
.progress-line.html span18::after{
  content: "84%";
}
.progress-line.css span18::after{
  content: "76%";
}
.progress-line.jquery span18::after{
  content: "91%";
}
.progress-line.python span18::after{
  content: "59%";
}
.progress-line.mysql span18::after{
  content: "70%";
}

/* -----------------second box------------------------- */

.skill-bars1 {
  padding: 25px 30px;
  width: 97%;
  background: #fff;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.skill-bars1 .bar1 {
  margin: 20px 0;
}

.skill-bars1 .bar1:first-child {
  margin-top: 0px;
}

.skill-bars1 .bar1 .info1 {
  margin-bottom: 5px;
}

.skill-bars1 .bar1 .info1 span19 {
  font-weight: 500;
  font-size: 17px;
  opacity: 0;
  animation: showText 0.5s 1s linear forwards;
}

@keyframes showText {
  100% {
    opacity: 1;
  }
}

.skill-bars1 .bar1 .progress-line1 {
  height: 10px;
  width: 100%;
  background: #f0f0f0;
  position: relative;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 10px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.8);
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
}

@keyframes animate {
  100% {
    transform: scaleX(1);
  }
}

.bar1 .progress-line1 span19 {
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
}
.bar1 .progress-line1 span19.animated1{
  animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;

}

.bar1 .progress-line1.html1 span19 {
  width: 61%;
}

.bar1 .progress-line1.css1 span19 {
  width: 50%;
}

.bar1 .progress-line1.jquery1 span19 {
  width: 68%;
}

.bar1 .progress-line1.python1 span19 {
  width: 82%;
}

.bar1 .progress-line1.mysql1 span19 {
  width: 98%;
}

.progress-line1 span19::before {
  position: absolute;
  content: "";
  top: -10px;
  right: 0;
  height: 0;
  width: 0;
  border: 7px solid transparent;
  border-bottom-width: 0px;
  border-right-width: 0px;
  border-top-color: #000;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

.progress-line1 span19::after {
  position: absolute;
  top: -28px;
  right: 0;
  font-weight: 500;
  background: #000;
  color: #fff;
  padding: 1px 8px;
  font-size: 12px;
  border-radius: 3px;
  opacity: 0;
  animation: showText2 0.5s 1.5s linear forwards;
}

@keyframes showText2 {
  100% {
    opacity: 1;
  }
}

.progress-line1.html1 span19::after {
  content: "61%";
}

.progress-line1.css1 span19::after {
  content: "50%";
}

.progress-line1.jquery1 span19::after {
  content: "68%";
}

.progress-line1.python1 span19::after {
  content: "82%";
}

.progress-line1.mysql1 span19::after {
  content: "98%";
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <section>
        <div class="container" data-aos="fade-up">
      <div class="section-title">
        <h2>example</h2>
        </div>
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
      <div class="column1">
      <div class="row1">
  <div class="skill-bars">
    <div class="bar">
      <div class="info">
        <span18>example 1</span18>
      </div>
      <div class="progress-line html">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>example 2</span18>
      </div>
      <div class="progress-line css">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>example 3</span18>
      </div>
      <div class="progress-line jquery">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>example 4</span18>
      </div>
      <div class="progress-line python">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>example 5</span18>
      </div>
      <div class="progress-line mysql">
        <span18></span18>
      </div>
    </div>
  </div>
            </div>
      </div>
      </div>
      <!-- second box -->
      <div class="container" data-aos="fade-up">
    <link rel="stylesheet" href="assets/css/picturealign.css"> 
       <div class="column1">
      <div class="row1">
  <div class="skill-bars1">
    <div class="bar1">
      <div class="info1">
        <span19>example 6</span19>
      </div>
      <div class="progress-line1 html1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>example 7</span19>
      </div>
      <div class="progress-line1 css1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>example 8</span19>
      </div>
      <div class="progress-line1 jquery1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>example 9</span19>
      </div>
      <div class="progress-line1 python1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>example 10</span19>
      </div>
      <div class="progress-line1 mysql1">
        <span19></span19>
      </div>
    </div>
  </div>
            </div>
      </div>
    </section>
    <script src="script.js"></script>
  </body>
</html>

第一个框按预期工作，但第二个框有一些动画故障，其中工具提示似乎是故障了。
所以简而言之，我只是想让Second Box/skills bar像First box/skills bar一样工作。有什么建议吗？
这个问题和我以前发的问题不一样，任何类似的问题我都已经删除了，所以请不要关闭这个帖子。谢谢！

CSS中的技能栏[重复]

1条答案

相关问题

热门标签

最新问答