Animating CSS arrow

HTML & CSS
1

I am wondering how to make the ‘scroll down’ icon on the bottom right of the video on the home page animate?

I want to make it a little more visible. Ideally I would like the arrow to animate down and then reset and loop

The link is camlingroup.com

Any help would be greatly appreciated.:slight_smile:

2

Maybe this old demo will help. You should be able to work out how to change it to your needs :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.arrowdown{
	display:inline-block;
	height:0;
	width:0;
	overflow:hidden;
	border-top:8px solid #000;
	border-left:8px solid transparent;
	border-right:8px solid transparent;
	position:relative;
	top:-1px;
}	
/* arrow bounce */
@-moz-keyframes bounce {
   0%, 15%, 25%, 80%, 100%  {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  20% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
   0%, 15%, 25%, 80%, 100%  {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  20% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 15%, 25%, 80%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-30px);
  }
  20% {
    transform: translateY(-15px);
  }
}
.bounce {
  -moz-animation: bounce 5s infinite;
  -webkit-animation: bounce 5s infinite;
  animation: bounce 5s infinite;
}



</style>
</head>

<body>
     <div class="arrow-bounce"> <a href="#latest-news" class="btn btn-scroll scroll-link">See More <i class="bounce arrowdown"></i></a> </div>
</body>
</html>
3

Thanks, not having much luck / dont see the connection with what I need to do… I understand the key frames and the gist of what it means, but my code is pseudo css, is this not the best way for me to carry out what I need?

.home:before{
    display:block;
    position:absolute;
    z-index:9; /* if it's needed */
    top:100vh; /* the viewport height */
    right:0;
    margin:-7em 1em 0 0; /* adjust the position */
    border-radius:1em;
    padding:1em;
    background:rgba(0,0,0,.6);
    color:#fff;
    text-align:center;
    font:900 1.2em/1 "frutiger", sans-serif;
    white-space:pre; /* to render the new line characters "\a" */
    content:"\a\a\25bc";
}
4

I assumed you wanted to bounce the arrow up and down?

This code will do it for you (more or less exactly as posted).

/* arrow bounce */
body.home:before{
 -moz-animation: bounce 5s infinite;
  -webkit-animation: bounce 5s infinite;
  animation: bounce 5s infinite;
}
@-moz-keyframes bounce {
   0%, 15%, 25%, 80%, 100%  {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  20% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
   0%, 15%, 25%, 80%, 100%  {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  20% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 15%, 25%, 80%, 100% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-30px);
  }
  20% {
    transform: translateY(-15px);
  }
}

If that’s not what you wanted then explain what you need that is different and I’ll try to help.:slight_smile:

1 Like
5

That worked great and is pushed live :slight_smile: I was having a senior moment, thanks very much for the help!

1 Like
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.