<CSS> @keyframes 애니메이션

나는 처음에 동적으로 움직이는 애니메이션 효과는 스크립트로만 처리를 해줄 수 있는 줄 알았는데 CSS 코드 만으로 충분히 애니매이션 효과가 가능하다. 

 

mdn을 뒤져보면 

 

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

 

이런 식으로 기본적인 정의가 되어있다. 간단히 정리를 하면 slidein 이라는 블록에 애니메이션 효과를 맥이는 것인데

@keyframes 뒤에 본인이 스타일먹일 블록명

from >> 시작할 때의 스타일

to >> 끝났을 떄의 스타일 

정도로 기초를 잡고 나도 처음 써봐서 구글링해서 나온 코드를 기반으로 한번 적용된 화면을 보자

 

 

See the Pen MWKBRmJ by Sang Hoon Jeong (@DevilFront) on CodePen.

 

 

적용된 코드만 따로 정리를 해보겠다

먼저 html 부분

 

 

<div class="message1">&nbsp;<span>어</span><span>디</span><span>로</span>&nbsp;
<span>갈</span><span>지</span></div>
    <div class="message2">&nbsp;<span>고</span><span>민</span>
    <span>된</span><span>다</span><span>면</span><span>?</span> </div>

 

CSS 부분

 

 

  @font-face { font-family: 'MapoHongdaeFreedom';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoHongdaeFreedomA.woff')
  format('woff');
 font-weight: normal; font-style: normal; }
.message1 {
    font-family: MapoHongdaeFreedom;
    font-size : 75px;
    font-weight:bold;
    top:200px;
    left: -740px;
}
.message2 {
    font-family: MapoHongdaeFreedom;
    font-size : 75px;
    font-weight:bold;
    top:300px;
    left: -740px;
}

.message1 span {
  display: inline-block;
  margin: 0 -.05em;
  animation: message1 2s infinite;
}
.message1 span:nth-child(2) {
  animation-delay: .1s;
}
.message1 span:nth-child(3) {
  animation-delay: .2s;
}
.message1 span:nth-child(4) {
  animation-delay: .3s;
}
.message1 span:nth-child(5) {
  animation-delay: .4s;
}


@keyframes message1 {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}

.message2 span {
  display: inline-block;
  margin: 0 -.05em;
 

 

 

 

 

 

 

실제로 지금 진행중인 프로젝트에 적용한 문구인데 나도 더 익숙해져서 자유자재로 스타일을 먹이고 싶다!!><