Search code examples
htmlcssanimationscrollcss-transitions

CSS animation for a short time while scrolling down to go from one section to another

I am a beginner learning HTML, CSS, and JavaScript. I have two codes: the former is HTML, which gives (after compiling) two inter-linked sections, and the latter is CSS infinite animation.

What I am trying: While scrolling down to go to section 2 from section 1, in between this, the animation will run for a few seconds, and after that animation will stop, and I will reach section 2. I don't want to change the code of the animation. Is it possible?

Thanks in advance for helping me.

<!DOCTYPE html>
<html>
<head>
<style>
html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
  
}

#section2 {
  height: 600px;
  
}
</style>
</head>
<body>



<div class="main" id="section1">
  <h2>Section 1</h2>
 
  <a href="#section2">Click to go Section 2 </a>
  
</div>

<div class="main" id="section2">
  <h2>Section 2</h2>
  
</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<h1>CSS Animation</h1>

<p>The animation-iteration-count property can be set to infinite to let the animation run for ever:</p>

<div></div>

</body>
</html>
Solution

  • As a beginner things can be overwhelming, don't give up though.

    A web-page has 3 components

    1. HTML: this is the main data of a document. a browser will render this
    2. CSS: this is styling, it's used to define how things will look
    3. Javascript (aka ECMAscript): this your programming tool. Here you can define what needs to happen.

    With javascript you can define what needs to happen when someone clicks on the link to 'section2'.

    function scrollTo(hash) {
  location.hash = "#" + hash;
  // trigger a second scroll to event, in case the hash was already present in the view
  document.getElementById(hash).scrollIntoView();
}

function onSectionOneClick(e) {
  e.preventDefault() // this stops the scrolling from happpening immediatly. But still allows users to interact with the link regulary.
  // add a class to apply the animation. The classname in the css is '.animation' 
  document.getElementById('section1').classList.add("animation");

  // set a function to run after the animation finishes. 4000ms is equal to animation-duration: 4s;
  setTimeout(() => {
    // this callback will run after 4000ms, 
    // we remove the animation class. so the animation stops
    document.getElementById('section1').classList.remove("animation");
    // we trigger a scroll to the other element. 
    scrollTo("section2")
  }, 4000)
}
    .animation {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

.animation>* {
  display: none;
}

@keyframes example {
  0% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px;
  }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px;
  }
  75% {
    background-color: green;
    left: 0px;
    top: 200px;
  }
  100% {
    background-color: red;
    left: 0px;
    top: 0px;
  }
}

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 600px;
}

#section2 {
  height: 600px;
}
    <div class="main" id="section1">
  <h2>Section 1</h2>

  <a href="#section2" onclick="onSectionOneClick(event)">Click to go Section 2 </a>

</div>

<div class="main" id="section2">
  <h2>Section 2</h2>

</div>