[css] 애니메이션 효과를 나타내는 css 종류

 

 

1. 애니메이션 효과 01

 

 

라인이 계속 떨어지는 효과로 싱글홈페이지 스크롤 표시에 표현하기 좋음.

 

예시)

HTML

<div class="scroll_block">
  <div class="letters">   
    <span>S</span>
    <span>C</span>
    <span>R</span>
    <span>O</span>
    <span>L</span>
    <span>L</span>
  </div>
  <div class="liner"></div>
</div>

CSS

.scroll_block { width: 300px; height:300px; border: 1px solid #dfdfdf; }
.scroll_block .letters span { display: block; padding: 2px 0; font-size: 12px; text-align: center;}

.scroll_block .liner { width: 1px; height: 100px; position: relative; margin: 12px auto 0; overflow: hidden;}
.scroll_block .liner::before { content: ''; display: block;position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; animation: scrolling 2s ease-in-out infinite; -webkit-animation: scrolling 2s ease-in-out infinite;}
@keyframes scrolling{0%{top:-110px;opacity:0}10%{opacity:0}50%{opacity:1}90%{opacity:0}100%{top:110px;opacity:0}

 

보기) 

See the Pen QWNYdOJ by minjeong kim (@chloe1103) on CodePen.

 

 

 

 

 

2. indicator