스크롤다운 아이콘 animation

type 01 

 <p class="scroll_down">scroll <span>down</span></p>

/* scroll down */
.scroll_down {width:2px; height:64px; background:rgba(255,255,255,.2); position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:0; overflow:hidden;}
.scroll_down span {animation:scroll_effect .75s infinite alternate linear; display:block;font-size: 0; width:2px; height:20px; background:#fff; position:absolute; top:0; left:0;}
.scroll_down.black {background:#d0d0d0;}
.scroll_down.black span {background:#414141;}
    
@keyframes scroll_effect {
	from {transform:translateY(0);}
	to {transform:translateY(64px);}
}

 

type 02

<div class="scroll_control_a">
  <div class="scrolldown" data-menuanchor="SitemapPage">
    <a class="sec3_last_link" href="#SitemapPage" title="다음 페이지로 가기">
      <div class="arrow"><span class="arrow_img"></span><span class="sound_only"></span></div>
      <div class="arrow"><span class="arrow_img"></span><span class="sound_only"></span></div>
      <div class="arrow"><span class="arrow_img"></span><span class="sound_only"></span></div>
    </a>
    <p>SCROLL DOWN</p>
  </div>
</div>

/*scroll*/
.scroll_control_a{
	position: absolute;
	width:100px;
	height:50px;
	bottom:110px;
	left:50%;
	margin-left:-50px;
	z-index:9;
}
.scrolldown{}
.scrolldown a{
	position: relative;
	display: block;
	width:100%;
	height:35px;
	text-align:center;
}
.scrolldown p{
	text-align:center;
	color:#fff;
	text-shadow:1px 1px 1px rgba(0, 0, 0, 0.43);
}
.scrolldown .arrow{
	position:absolute;
	width:25px;
	height:11px;
	opacity: 0;
	left:50%;
	margin-left:-13px;
}
.scrolldown .arrow_img{
	position:absolute;
	width:100%;
	height: 100%;
	background-image: url("/img/main/scroll_arrow.png");
	background-size:23px 11px;
	background-repeat:no-repeat;
	left:0;
}
.scrolldown a .arrow {
    animation: arrow 1500ms linear infinite;
    -ms-animation: arrow 1500ms linear infinite;
    -moz-animation: arrow 1500ms linear infinite;
    -webkit-animation: arrow 1500ms linear infinite;
}
.scrolldown a .arrow:nth-child(2) {
    animation-delay:  -0.5s;
    -ms-animation-delay:  -500ms;
    -moz-animation-delay: -500ms;
    -webkit-animation-delay:  -0.5s;
}
.scrolldown a .arrow:nth-child(3) {
    animation-delay:  -1s;
    -ms-animation-delay: -1000ms;
    -moz-animation-delay: -1000ms;
    -webkit-animation-delay:  -1s;
}
.arrowTxt{
	position: absolute;
	bottom:0;
	width:100px;
	text-align:center;
	letter-spacing:1px;
	left:50%;
	margin-left:-50px;
	z-index:2;
}
.arrowTxt a{
	text-decoration:none;
	color:#fff;
	font-size:11px;
}
.arrowTxt a:hover{color:#fff;}

@-webkit-keyframes arrow {
    0% {-webkit-transform: translateY(0px);opacity: 0;}
    50% {-webkit-transform: translateY(9px);opacity: 1;}
    100% {-webkit-transform: translateY(18px);opacity: 0;}
}
@-ms-keyframes arrow{
    0% {-moz-transform: translateY(0px);opacity: 0;}
    50% {-moz-transform: translateY(9px);opacity: 1;}
    100% {-moz-transform: translateY(18px);opacity: 0;}
}
@-moz-keyframes arrow{
    0% {-moz-transform: translateY(0px);opacity: 0;}
    50% {-moz-transform: translateY(9px);opacity: 1;}
    100% {-moz-transform: translateY(18px);opacity: 0;}
}
@keyframes arrow {
    0% {transform: translateY(0px);opacity: 0;}
    50% {transform: translateY(9px);opacity: 1;}
    100% {transform: translateY(18px);opacity: 0;}
}