This post contains a total of 12+ CSS Animated Arrow Examples with Source Code. All these Animated Arrows are made using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
CSS Animated Arrow Examples
1. Animated Arrow Scroll
Made by Collin Pierce. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: #8347ad;
}
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.mouse_scroll {
display: block;
margin: 0 auto;
width: 24px;
height: 100px;
margin-top: 125px;
}
.m_scroll_arrows
{
display: block;
width: 5px;
height: 5px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
border-right: 2px solid #fcfdfe;
border-bottom: 2px solid #fcfdfe;
margin: 0 0 3px 4px;
width: 16px;
height: 16px;
}
.unu
{
margin-top: 1px;
}
.unu, .doi, .trei
{
-webkit-animation: mouse-scroll 1s infinite;
-moz-animation: mouse-scroll 1s infinite;
animation: mouse-scroll 1s infinite;
}
.unu
{
-webkit-animation-delay: .1s;
-moz-animation-delay: .1s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
animation-delay: alternate;
}
.doi
{
-webkit-animation-delay: .2s;
-moz-animation-delay: .2s;
-webkit-animation-direction: alternate;
animation-delay: .2s;
animation-direction: alternate;
margin-top: -6px;
}
.trei
{
-webkit-animation-delay: .3s;
-moz-animation-delay: .3s;
-webkit-animation-direction: alternate;
animation-delay: .3s;
animation-direction: alternate;
margin-top: -6px;
}
.mouse {
height: 42px;
width: 24px;
border-radius: 14px;
transform: none;
border: 2px solid white;
top: 170px;
}
.wheel {
height: 5px;
width: 2px;
display: block;
margin: 5px auto;
background: white;
position: relative;
height: 4px;
width: 4px;
border: 2px solid #fff;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.wheel {
-webkit-animation: mouse-wheel 0.6s linear infinite;
-moz-animation: mouse-wheel 0.6s linear infinite;
animation: mouse-wheel 0.6s linear infinite;
}
@-webkit-keyframes mouse-wheel{
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(6px);
-ms-transform: translateY(6px);
transform: translateY(6px);
}
}
@-moz-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-o-keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@keyframes mouse-wheel {
0% { top: 1px; }
25% { top: 2px; }
50% { top: 3px;}
75% { top: 2px;}
100% { top: 1px;}
}
@-webkit-keyframes mouse-scroll {
0% { opacity: 0;}
50% { opacity: .5;}
100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
@keyframes mouse-scroll {
0% { opacity: 0; }
50% { opacity: .5; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<div class="mouse_scroll">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</div>
</body>
</html>
2. Arrows list
Made by INK. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html,
body {
background: #121212;
height: 100%;
font-family: "Playfair Display", serif;
font-size: 16px;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
ul li {
margin: 0 0 24px;
list-style-type: none;
}
.the-arrow {
width: 64px;
transition: all 0.2s;
}
.the-arrow.-left {
position: absolute;
top: 60%;
left: 0;
}
.the-arrow.-left > .shaft {
width: 0;
background-color: #999;
}
.the-arrow.-left > .shaft:before, .the-arrow.-left > .shaft:after {
width: 0;
background-color: #999;
}
.the-arrow.-left > .shaft:before {
transform: rotate(0);
}
.the-arrow.-left > .shaft:after {
transform: rotate(0);
}
.the-arrow.-right {
top: 3px;
}
.the-arrow.-right > .shaft {
width: 64px;
transition-delay: 0.2s;
}
.the-arrow.-right > .shaft:before, .the-arrow.-right > .shaft:after {
width: 8px;
transition-delay: 0.3s;
transition: all 0.5s;
}
.the-arrow.-right > .shaft:before {
transform: rotate(40deg);
}
.the-arrow.-right > .shaft:after {
transform: rotate(-40deg);
}
.the-arrow > .shaft {
background-color: #999;
display: block;
height: 1px;
position: relative;
transition: all 0.2s;
transition-delay: 0;
will-change: transform;
}
.the-arrow > .shaft:before, .the-arrow > .shaft:after {
background-color: #999;
content: "";
display: block;
height: 1px;
position: absolute;
top: 0;
right: 0;
transition: all 0.2s;
transition-delay: 0;
}
.the-arrow > .shaft:before {
transform-origin: top right;
}
.the-arrow > .shaft:after {
transform-origin: bottom right;
}
.animated-arrow {
display: inline-block;
color: #999;
font-size: 1.25em;
font-style: italic;
text-decoration: none;
position: relative;
transition: all 0.2s;
}
.animated-arrow:hover {
color: #eaeaea;
}
.animated-arrow:hover > .the-arrow.-left > .shaft {
width: 64px;
transition-delay: 0.1s;
background-color: #eaeaea;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before, .animated-arrow:hover > .the-arrow.-left > .shaft:after {
width: 8px;
transition-delay: 0.1s;
background-color: #eaeaea;
}
.animated-arrow:hover > .the-arrow.-left > .shaft:before {
transform: rotate(40deg);
}
.animated-arrow:hover > .the-arrow.-left > .shaft:after {
transform: rotate(-40deg);
}
.animated-arrow:hover > .main {
transform: translateX(80px);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft {
width: 0;
transform: translateX(200%);
transition-delay: 0;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before, .animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
width: 0;
transition-delay: 0;
transition: all 0.1s;
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:before {
transform: rotate(0);
}
.animated-arrow:hover > .main > .the-arrow.-right > .shaft:after {
transform: rotate(0);
}
.animated-arrow > .main {
display: flex;
align-items: center;
transition: all 0.2s;
}
.animated-arrow > .main > .text {
margin: 0 16px 0 0;
line-height: 1;
}
.animated-arrow > .main > .the-arrow {
position: relative;
}
</style>
</head>
<body>
<div class='container'>
<ul>
<li>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Discover the Agency
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</li>
<li>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
View Projects
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</li>
<li>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Get in Touch
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</li>
</ul>
</div>
</body>
</html>3. Animated arrow
Made by Alexander Prestmo. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* Default styles */
body {
background: #000;
font-family: "Helvetica Neue", sans-serif;
font-size: 1.6rem;
font-weight: 100;
height: 100vh;
margin: 0;
width: 100vw;
}
a {
color: #fab;
letter-spacing: 0.13em;
text-decoration: none;
text-transform: uppercase;
}
.container {
align-items: center;
display: flex;
height: 100%;
margin: auto;
width: 300px;
}
/* Demo styles */
.container {
overflow: hidden;
position: relative;
}
a {
padding-left: 60px;
transition: padding-left 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
a:hover {
padding-left: 90px;
}
a:hover svg {
transform: translate3d(0, -50%, 0);
}
svg {
left: 0;
position: absolute;
top: 50%;
transform: translate3d(-30px, -50%, 0);
transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
width: 60px;
}
</style>
</head>
<body>
<!-- Idea from: https://ccncn.eu/ -->
<div class="container">
<a href="#">
Read more
<svg xmlns="http://www.w3.org/2000/svg" width="62" height="15" viewBox="0 0 62 15"><path fill="#fab" d="M0 7h60v1H0z"></path><path fill="#fab" d="M53.8 15l-.8-.7 7.4-6.8L53 .7l.8-.7L62 7.5z"></path></svg>
</a>
</div>
</body>
</html>4. Animated Down Arrow
Made by Marcos. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.arrow {
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.arrow-first {
-webkit-animation: arrow-movement 2s ease-in-out infinite;
animation: arrow-movement 2s ease-in-out infinite;
}
.arrow-second {
-webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
animation: arrow-movement 2s 1s ease-in-out infinite;
}
.arrow:before,
.arrow:after {
background: #7f2813;
content: '';
display: block;
height: 3px;
position: absolute;
top: 0;
left: 0;
width: 30px;
}
.arrow:before {
-webkit-transform: rotate(45deg) translateX(-23%);
transform: rotate(45deg) translateX(-23%);
-webkit-transform-origin: top left;
transform-origin: top left;
}
.arrow:after {
-webkit-transform: rotate(-45deg) translateX(23%);
transform: rotate(-45deg) translateX(23%);
-webkit-transform-origin: top right;
transform-origin: top right;
}
@-webkit-keyframes arrow-movement {
0% {
opacity: 0;
top: 45%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes arrow-movement {
0% {
opacity: 0;
top: 45%;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="arrow arrow-first"></div>
<div class="arrow arrow-second"></div>
</body>
</html>5. CSS Arrow Animation
Made by Heather. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:200,400);
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
body{
padding:5%;
background:#323139;
color:white;
}
h1{
font-family: 'Raleway', sans-serif;
font-weight:200;
}
h1.year{
font-weight:400;
}
.right{
float:right;
text-align:right;
margin-right:-8px;
}
.arrow{
margin-top:1em;
border:2px solid #f06;
position:relative;
background:#f06;
width:0%;
animation:grow 3s ease forwards;
}
/*left dot*/
.arrow:before{
content:"";
border:4px solid #f06;
border-radius:50%;
position:absolute;
top:-4px;
left:-4px;
}
.arrow .head, .arrow .head:after{
border:2px solid #f06;
border-radius:2px;
width:8px;
position:absolute;
right:-7px;
top:1px;
transform:rotate(-45deg);
}
.arrow .head:after{
content:"";
border-color:#FFA0C6;
right:-6px;
top:-6px;
transform:rotate(90deg);
}
@keyframes grow{
to{
width:100%;
}
}
.neatnait-love{
box-sizing:border-box;
width:250px;
margin:auto;
margin-top:15em;
font-weight:300;
font-family: 'Roboto', sans-serif;
text-shadow:0 5px 20px #000;
color:white;
background:#111;
padding:2em 6em 2em 4em;
position:relative;
bottom:10%;
left:50%;
margin-left:-125px;
}
a{
text-decoration:none;
color:#f06;
border-bottom:1px solid white;
padding-bottom:5px;
transition:border .5s ease;
}
a:hover{
border-color:#111;
color:#f06;
border-bottom:4px solid white;
}
</style>
</head>
<body>
<h1>The road so far</h1>
<br>
<h1 class="year">2010</h1>
<div class="arrow">
<div class="head"></div>
</div>
<h1 class="year right">2014</h1>
<h3 class="neatnait-love">
made with love at
@<a href="http://neatnait.com">neatnait</a>
</h3>
</body>
</html>6. Hover Arrow animation
Made by Giorgio Acquati. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background-color: #282828;
}
div.arrow {
width: 6vmin;
height: 6vmin;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-45deg);
}
div.arrow::before {
content: "";
width: 100%;
height: 100%;
border-width: 0.8vmin 0.8vmin 0 0;
border-style: solid;
border-color: #fafafa;
transition: 0.2s ease;
display: block;
transform-origin: 100% 0;
}
div.arrow:after {
content: "";
float: left;
position: relative;
top: -100%;
width: 100%;
height: 100%;
border-width: 0 0.8vmin 0 0;
border-style: solid;
border-color: #fafafa;
transform-origin: 100% 0;
transition: 0.2s ease;
}
div.arrow:hover::after {
transform: rotate(45deg);
border-color: orange;
height: 120%;
}
div.arrow:hover::before {
border-color: orange;
transform: scale(0.8);
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>7. ANIMATED ARROW (POINTING LEFT)
Made by hannelore. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
body {
background: transparant;
margin:0;
}
/* arrow */
.arrow,
.arrow:before {
position: absolute;
left: 50%;
}
.arrow {
width: 20px;
height: 20px;
top: 50%;
margin: -20px 0 0 -20px;
-webkit-transform: rotate(315deg);
border-left: none;
border-top: none;
border-right: 2px #2196F3 solid;
border-bottom: 2px #2196F3 solid;
}
.arrow:before {
content: "";
width: 20px;
height: 20px;
top: 50%;
margin: -10px 0 0 -10px;
border-left: none;
border-top: none;
border-right: 1px #2196F3 solid;
border-bottom: 1px #2196F3 solid;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: arrow;
}
@keyframes arrow {
0% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-10px, -10px);
}
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>8. Pure CSS moving arrow
Made by Joshua Carroll. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.animated {
--animated-duration: 5; /* Duration in seconds */
--animated-width: 1000; /* Width you want the animation to be */
--animated-height: 64; /* Height you want the animation to be */
--animated-direction: 10; /* Direction in degrees */
--animated-image-width: 200; /* Width of image being used */
width: calc(var(--animated-width) * 1px);
height: calc(var(--animated-height) * 1px);
background-repeat: repeat-x;
animation-name: moveRight;
animation-duration: calc(var(--animated-duration) * 1s);
animation-timing-function: linear;
animation-iteration-count: infinite;
transform: rotate(calc(var(--animated-direction) * 1deg));
}
.animated:after {
content: "";
position: absolute;
z-index: 1;
top:-1px;
left: -1px;
pointer-events: none;
background-image: linear-gradient(to right,rgba(255,255,255, 1) 5%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(255,255,255, 1) 95%);
width: calc(100% + 2px);
height: calc(100% + 2px);
}
@keyframes moveRight {
0% {background-position: calc(var(--animated-image-width) * -1px) 0; }
100% {background-position: calc(var(--animated-image-width) * 1px) 0; }
}
.et {
background-image: url(http://necaonline.com/wp-content/uploads/2013/04/et-feat.jpg);
}
.arrow {
background-image: url(data:image/png;base64,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);
}
</style>
</head>
<body>
<div class="animated arrow"></div>
</body>
</html>9. Arrow Animation
Made by James Muspratt. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@-webkit-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
-webkit-background-size: 75% auto;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@-moz-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
-webkit-background-size: 75% auto;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@-ms-keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
-webkit-background-size: 75% auto;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
@keyframes pulse {
0% {
opacity: 0;
background-position: center top;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
10% {
opacity: 0;
}
50% {
opacity: 1;
-moz-background-size: 75% auto;
-o-background-size: 75% auto;
-webkit-background-size: 75% auto;
background-size: 75% auto;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
background-position: center bottom;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
}
}
body {
background-color: #0d74ff;
}
.scroll-down {
margin: 0;
border: 2px solid #fff;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-left: -50px;
margin-top: -50px;
}
.scroll-down a {
display: block;
opacity: 0;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
line-height: 0;
font-size: 0;
color: transparent;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
-moz-background-size: 0 auto;
-o-background-size: 0 auto;
-webkit-background-size: 0 auto;
background-size: 0 auto;
-webkit-animation: pulse 1.5s 0s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0s infinite normal ease forwards;
-o-animation: pulse 1.5s 0s infinite normal ease forwards;
animation: pulse 1.5s 0s infinite normal ease forwards;
background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg");
background-repeat: no-repeat;
}
.scroll-down a:before, .scroll-down a:after {
content: " ";
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg") no-repeat center top;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
}
.scroll-down a:before {
-webkit-animation: pulse 1.5s 0.25s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0.25s infinite normal ease forwards;
-o-animation: pulse 1.5s 0.25s infinite normal ease forwards;
animation: pulse 1.5s 0.25s infinite normal ease forwards;
}
.scroll-down a:after {
-webkit-animation: pulse 1.5s 0.5s infinite normal ease forwards;
-moz-animation: pulse 1.5s 0.5s infinite normal ease forwards;
-o-animation: pulse 1.5s 0.5s infinite normal ease forwards;
animation: pulse 1.5s 0.5s infinite normal ease forwards;
}
.scroll-down a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<p class="scroll-down"><a href="#complements" class="animate">More</a></p>
</body>
</html>10. CSS only animated arrow
Made by Marek Zeman. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTeY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRbO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzOY5mlVXtdNkpsMpKkrDXP4.woff) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/xjAJXh38I15wypJXxuGMBqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
}
</style>
<style>
#arrow {
-webkit-transition: border 0.2s linear;
-moz-transition: border 0.2s linear;
-ms-transition: border 0.2s linear;
-o-transition: border 0.2s linear;
transition: border 0.2s linear;
text-decoration: none;
line-height: 0;
margin-top: -100px;
font-size: 40px;
position: absolute;
height: 0;
right: 0;
top: 50%;
border-bottom: 100px solid transparent;
border-top: 100px solid transparent;
border-right: 150px solid #0AF;
}
#arrow > span {
-webkit-transition: margin 0.1s linear;
-moz-transition: margin 0.1s linear;
-ms-transition: margin 0.1s linear;
-o-transition: margin 0.1s linear;
transition: margin 0.1s linear;
font-family: "Open Sans", "Courier New", Courier, monospace;
line-height: 0;
margin-left: 65px;
margin-top: -1px;
position: absolute;
display: block;
color: white;
height: 0;
}
#arrow:hover {
border-right-color: #333;
}
#arrow:hover > span {
margin-left: 75px;
}
</style>
</head>
<body>
<!-- JUST EXAMPLE OF CSS ARROW (for my work) -->
<a href="#" id="arrow"><span>►►</span></a>
</body>
</html>11. SVG Triple Arrow Animation
Made by M-A Lavigne. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
/* Markup */
body {
color: #000;
margin: 0;
font-family: "Lucida Console", Monaco, monospace;
}
.container {
background: PaleGoldenRod;
height: 100vh;
padding: 20px;
text-align: center;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.content p {
margin: 0 0 20px;
}
/* Arrow & Hover Animation */
#more-arrows {
width: 75px;
height: 65px;
}
#more-arrows:hover polygon {
fill: #FFF;
transition: all 0.2s ease-out;
}
#more-arrows:hover polygon.arrow-bottom {
transform: translateY(-18px);
}
#more-arrows:hover polygon.arrow-top {
transform: translateY(18px);
}
polygon {
fill: #FFF;
transition: all 0.2s ease-out;
}
polygon.arrow-middle {
opacity: 0.75;
}
polygon.arrow-top {
opacity: 0.5;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<p>Hover me !</p>
<svg id="more-arrows">
<polygon class="arrow-top" points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 "/>
<polygon class="arrow-middle" points="37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7 "/>
<polygon class="arrow-bottom" points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/>
</svg>
</div>
</div>
</body>
</html>12. The Arrow
Made by Temani Afif. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
.arrow-1 {
width:100px;
height:30px;
display: flex;
}
.arrow-1:before {
content: "";
background: currentColor;
width:15px;
clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
animation: a1 1.5s infinite linear;
}
@keyframes a1 {
90%,100%{flex-grow: 1}
}
.arrow-2 {
width:100px;
height:30px;
display: flex;
justify-content: center;
}
.arrow-2:before,
.arrow-2:after {
content: "";
background: currentColor;
width:15px;
clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
animation: a2 1s infinite linear;
}
.arrow-2:before {
transform: scaleX(-1);
}
@keyframes a2 {
90%,100%{flex-grow: .5}
}
.arrow-3 {
width:100px;
height:30px;
display: flex;
}
.arrow-3:before,
.arrow-3:after {
content: "";
flex: 1;
margin: 0 5px;
background: currentColor;
clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
animation: a3 .5s infinite alternate;
}
.arrow-3:after {
--s:-1;
}
@keyframes a3 {
0% {transform: scaleX(var(--s,1)) translate(-4px)}
100%{transform: scaleX(var(--s,1)) translate( 4px)}
}
.arrow-4 {
width:40px;
height:30px;
display:grid;
}
.arrow-4:before,
.arrow-4:after {
content: "";
grid-area: 1/1;
background: currentColor;
clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
animation: a4 .5s infinite alternate;
}
.arrow-4:after {
--s:-1;
}
@keyframes a4 {
0% {transform: scale(var(--s,1)) translate(12px,-6px) translate(4px)}
100%{transform: scale(var(--s,1)) translate(12px,-6px) translate(-4px)}
}
.arrow-5 {
width:50px;
height:30px;
display: grid;
overflow: hidden;
}
.arrow-5:before,
.arrow-5:after {
content: "";
grid-area: 1/1;
background: currentColor;
clip-path: polygon(0 10px,calc(100% - 15px) 10px,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,calc(100% - 15px) calc(100% - 10px),0 calc(100% - 10px));
animation: a5 1s infinite;
transform: translate(calc(0% + var(--s,0%)));
}
.arrow-5:after {
--s:-100%;
}
@keyframes a5 {
80%,100%{transform: translate(calc(100% + var(--s,0%)))}
}
.arrow-6 {
width:50px;
height:60px;
display: grid;
}
.arrow-6:before,
.arrow-6:after {
content: "";
background:
linear-gradient(90deg,currentColor calc(100% - 15px),#0000 0) 0 50%/100% 10px,
conic-gradient(from -136deg at 15px 50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) 35px 0/100% 100%;
background-repeat: repeat-x;
animation: a6 1s infinite;
}
.arrow-6:after {
transform: scaleX(-1);
}
@keyframes a6 {
80%,100%{background-position: 50px 50%,85px 0}
}
.arrow-7 {
width:110px;
height:30px;
display: flex;
background:
linear-gradient(currentColor 0 0) left /30px 10px,
linear-gradient(currentColor 0 0) right/30px 10px,
conic-gradient(from -136deg at 15px 50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) 30px 0/100% 100%,
conic-gradient(from 44deg at calc(100% - 15px) 50%,#0000 ,currentColor 1deg 90deg,#0000 91deg) calc(100% - 30px) 0/100% 100%;
background-repeat: no-repeat;
animation: a7 .5s infinite alternate;
}
.arrow-7:before {
content: "";
flex: 1;
background: inherit;
transform: rotate(90deg);
}
@keyframes a7 {
90%,100%{width:93px}
}
.arrow-8 {
width:30px;
height:30px;
display: flex;
background:
linear-gradient(currentColor 0 0) center/calc(100% - 30px) 10px,
conic-gradient(from -136deg at right,#0000 ,currentColor 1deg 90deg,#0000 91deg) right/15px 100%,
conic-gradient(from 44deg at left ,#0000 ,currentColor 1deg 90deg,#0000 91deg) left /15px 100%;
background-repeat: no-repeat;
animation: a8 .5s infinite alternate;
}
.arrow-8:before {
content: "";
flex: 1;
background: inherit;
transform: rotate(90deg);
}
@keyframes a8 {
90%,100%{width:80px}
}
.arrow-9 {
width:60px;
height:30px;
display: flex;
background:
linear-gradient(currentColor 0 0) center/calc(100% - 30px) 10px,
conic-gradient(from -136deg at right,#0000 ,currentColor 1deg 90deg,#0000 91deg) right/15px 100%,
conic-gradient(from 44deg at left ,#0000 ,currentColor 1deg 90deg,#0000 91deg) left /15px 100%;
background-repeat: no-repeat;
animation: a9 .5s infinite linear alternate;
}
@keyframes a9 {
0% {transform: translate(-30px)}
100% {transform: translate( 30px)}
}
.arrow-10 {
width:30px;
height:60px;
padding-top: 60px;
display: grid;
background:
linear-gradient(currentColor 0 0) bottom/10px calc(100% - 15px),
conic-gradient(from 134deg at top,#0000 ,currentColor 1deg 90deg,#0000 91deg) top/100% 15px;
background-origin: content-box;
background-repeat: no-repeat;
animation: a10-0 2s infinite;
}
.arrow-10:before,
.arrow-10:after {
content: "";
grid-area: 1/1;
background:inherit;
background-size: 10px calc(100% - 25px),100% 25px;
animation: a10-1 2s infinite;
}
.arrow-10:after {
background-size: 10px calc(100% - 30px),100% 30px;
animation: a10-2 2s infinite;
}
@keyframes a10-0 {
25%,100% {padding-top:0px}
}
@keyframes a10-1 {
0%,25% {margin:60px -10px 0}
50%,100% {margin:8px -10px 0}
}
@keyframes a10-2 {
0%,50% {margin:60px -15px 0}
75%,100% {margin:20px -15px 0}
}
/**/
body {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
grid-auto-rows: 130px;
place-items:center;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="arrow-1"></div>
<div class="arrow-2"></div>
<div class="arrow-3"></div>
<div class="arrow-4"></div>
<div class="arrow-5"></div>
<div class="arrow-6"></div>
<div class="arrow-7"></div>
<div class="arrow-8"></div>
<div class="arrow-9"></div>
<div class="arrow-10"></div>
</body>
</html>13. Scroll arrow animation
Made by Adel Elkhodary. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background-color: #555;
text-align: center;
}
.scroll {
position: relative;
margin: auto;
text-align: center;
height: 180px;
overflow: hidden;
}
.scroll__line {
position: absolute;
top: 0;
left: 50%;
display: block;
width: 1px;
height: 100%;
z-index: 10;
background-color: #fff;
-webkit-animation: scroll 2.4s infinite normal;
animation: scroll 2.4s infinite normal;
transform: translateY(-50%);
}
.scroll__arrow {
display: block;
position: relative;
z-index: 111;
padding-left: 1px;
top: -13px;
}
@-webkit-keyframes scroll {
0% {
transform: translate3d(0, -100%, 0);
}
15% {
transform: translate3d(0, -95%, 0);
}
85% {
transform: translate3d(0, 95%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
@keyframes scroll {
0% {
transform: translate3d(0, -100%, 0);
}
15% {
transform: translate3d(0, -95%, 0);
}
85% {
transform: translate3d(0, 95%, 0);
}
100% {
transform: translate3d(0, 100%, 0);
}
}
</style>
</head>
<body>
<div class="scroll">
<span class="scroll__line"></span>
</div>
<span class="scroll__arrow">
<svg width="17px" height="9px" viewBox="0 0 17 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square">
<g id="Desktop_Screen-Copy-39" transform="translate(-660.000000, -1241.000000)" stroke="#FFFFFF">
<g id="Group-Copy-2" transform="translate(660.000000, 1008.000000)">
<path d="M0.5,233.5 L8.5,241.5" id="p-copy-2"></path>
<path d="M16.0178344,233.982166 L9,241" id="p-copy-3"></path>
</g>
</g>
</g>
</svg>
</span>
</body>
</html>