Clever Geek Handbook

How do I animate an element so that it loops inside its parent in HTML5 and CSS3?

I am trying to create an animation similar to the one present in "scroll down" on this page .

Here's my attempt:

body {
  background-color: black;
}

@keyframes anim {
   0% { top: 18% }
   30% { top: 18% }
   50% { top: 100% }
   51% { top: -50% }
   70% { top: 18% }
   100% { top: 18% }
}

#scroll-down-icon {
  position: absolute;
  left: 32px;
  top: 32px;
  border: 2.3px solid white;
  width: 128px;
  height: 128px;
  border-radius: 64px;
}

h1 {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  font-size: 32px;
  left: 0;
  top: 18%;
  text-align: center;
  animation-name: anim;
  animation-duration: 1.75s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
      

        
        
        
      

    
<div id="scroll-down-icon"><h1>╲╱</h1></div>
Run code


However, the above code doesn't h1

really "loop" inside #scroll-down-icon div

.

How can I solve this problem and create an effect similar to the one present on the page using CSS and HTML?

+3


source to share


1 answer 


div {
  overflow:hidden;
  cursor: pointer;
}

      

        
        
        
      

    



body {
  background-color: black;
}

@keyframes anim {
   0% { top: 18% }
   30% { top: 18% }
   50% { top: 100% }
   51% { top: -50% }
   70% { top: 18% }
   100% { top: 18% }
}

#scroll-down-icon {
  position: absolute;
  left: 32px;
  top: 32px;
  border: 2.3px solid white;
  width: 128px;
  height: 128px;
  border-radius: 64px;
}

h1 {
  width: 100%;
  height: 100%;
  position: relative;
  color: white;
  font-size: 32px;
  left: 0;
  top: 18%;
  text-align: center;
  animation-name: anim;
  animation-duration: 1.75s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}  
 
div {
  overflow:hidden;
  cursor: pointer;
}
      

        
        
        
      

    
<div id="scroll-down-icon"><h1>╲╱</h1></div>
Run code


+3


source






More articles:


All Articles