1. 技术文章
  2. Animation in CSS

Animation in CSS

由 夙愿已清 提交于 2021-02-13 17:32:16

问题


I want to know how can you edit/modify the css so that it starts the animation when the user scrolls at the page where the whole animation or the skills bar in my case, is visible.

The animation works but the problem I am facing is that it works on the load of the website, and when I get to the skills bar the animation has been already played and it is not there anymore.

See the example below:

https://drive.google.com/file/d/1ogZE87xoeJV4vbMkE7fBV068ERMzd8it/view

This is an example, see how the animation plays when the user scrolls down to that page or section? I would like the same to happen with the below code:

@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: 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);
  }
}
.bar .progress-line span18{
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  animation: animate 1s 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%;
}
.progress-line span18::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::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;
  animation: animate 1s 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%";
}
 <section>
        <div class="container" data-aos="fade-up">
      <div class="section-title">
        <h2>What I am Working On</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>Harvard CS50 Course</span18>
      </div>
      <div class="progress-line html">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Youtube Channel (Java Tutorials)</span18>
      </div>
      <div class="progress-line css">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>C++</span18>
      </div>
      <div class="progress-line jquery">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Java</span18>
      </div>
      <div class="progress-line python">
        <span18></span18>
      </div>
    </div>
    <div class="bar">
      <div class="info">
        <span18>Web Development (Front-End)</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>Competitive Chess (School Club)</span19>
      </div>
      <div class="progress-line1 html1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Basketball</span19>
      </div>
      <div class="progress-line1 css1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>GitHub Side Projects</span19>
      </div>
      <div class="progress-line1 jquery1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>Computer Science and Math Tutoring</span19>
      </div>
      <div class="progress-line1 python1">
        <span19></span19>
      </div>
    </div>
    <div class="bar1">
      <div class="info1">
        <span19>University Supplementary Applications &#128522</span19>
      </div>
      <div class="progress-line1 mysql1">
        <span19></span19>
      </div>
    </div>
  </div>
            </div>
      </div>
    </section>

Right now, the animation plays but like I said it only plays on the load of the whole website, but when I reach that section where the skills bar is displayed, the animation does not work. Any suggestions?

BTW I did use bad coding practices which is that I reuseed the same code for skills bar for the second skills bar, I just renamed the classes which I should not have, but I am gradually getting the jist of good coding practices.


回答1:


Try and add the animation to a class which you only add to the element when it scrolls into view.

  1. Add animation styles to "animate" class.
  2. Add scroll event listener and get skills bar offset-top property.
  3. In the scroll event listener, check whether the offset top of your skills bar is in view, if it is in view, add the "animate" class you created in step 1.

This should start the animation only when you add the class to your skills bar and therefore every time you scroll in view, the animation will be applied




回答2:


here is an example of setting it on scroll but u have to set it's default to be set if the windows does not overflow

EDITED: less code with foreach instead of separated functions.

$(document).ready(function() {

  $(window).scroll(function(event) {
  var nxtdiv, nxtdiv2;
    var scroll = $(window).scrollTop() + 240;
    var trgt = $('.info > span18');
    var trgt2 = $('.info1 > span19');
    trgt.each(function(e){
        nxtdiv = trgt[e].parentNode.nextElementSibling;
        if (scroll >= trgt[e].offsetTop && !(nxtdiv.classList.contains('progress-line'))) {
        nxtdiv.classList.add('progress-line');
        }
        });
        
        trgt2.each(function(e){
        nxtdiv2 = trgt2[e].parentNode.nextElementSibling;
        if (scroll >= trgt2[e].offsetTop && !(nxtdiv2.classList.contains('progress-line1'))) {
        nxtdiv2.classList.add('progress-line1');
        }

});
        
  });
});


$(window).scroll();
@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%;
  align-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: 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);
  }
}

.bar .progress-line span18 {
  height: 100%;
  position: absolute;
  border-radius: 10px;
  transform: scaleX(0);
  transform-origin: left;
  background: black;
  animation: animate 1s 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%;
}

.progress-line span18::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::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;
  animation: animate 1s 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%";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="container" data-aos="fade-up">
    <div class="section-title">
      <h2>What I am Working On</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 id="S1">Harvard CS50 Course</span18>
            </div>
            <div class="html progress-line">
              <span18></span18>
            </div>
          </div>
          <div class="bar">
            <div class="info">
              <span18 id="S2">Youtube Channel (Java Tutorials)</span18>
            </div>
            <div class="css progress-line">
              <span18></span18>
            </div>
          </div>
          <div class="bar">
            <div class="info">
              <span18 id="S3">C++</span18>
            </div>
            <div class="jquery">
              <span18></span18>
            </div>
          </div>
          <div id="S4" class="bar">
            <div class="info">
              <span18>Java</span18>
            </div>
            <div class="python">
              <span18></span18>
            </div>
          </div>
          <div id="S5" class="bar">
            <div class="info">
              <span18>Web Development (Front-End)</span18>
            </div>
            <div class="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 id="S6" class="bar1">
            <div class="info1">
              <span19>Competitive Chess (School Club)</span19>
            </div>
            <div class="html1">
              <span19></span19>
            </div>
          </div>
          <div id="S7" class="bar1">
            <div class="info1">
              <span19>Basketball</span19>
            </div>
            <div class="css1">
              <span19></span19>
            </div>
          </div>
          <div id="S8" class="bar1">
            <div class="info1">
              <span19>GitHub Side Projects</span19>
            </div>
            <div class="jquery1">
              <span19></span19>
            </div>
          </div>
          <div id="S9" class="bar1">
            <div class="info1">
              <span19>Computer Science and Math Tutoring</span19>
            </div>
            <div class="python1">
              <span19></span19>
            </div>
          </div>
          <div id="S10" class="bar1">
            <div class="info1">
              <span19>University Supplementary Applications &#128522</span19>
            </div>
            <div class="mysql1">
              <span19></span19>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


来源：https://stackoverflow.com/questions/66002363/animation-in-css

标签
javascript
html
jquery
css
animation
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!