CSS KEYFRAME

@KEYFRAME

• CSS 제공하는 문법으로, 애니메이션 효과를 나타낼 수 있다.
• @KEYFRAME 내의 구간들이 하나의 애니메이션 효과를 나타낸다.

사용법

• @KEYFRAME내에 선택자를 묶어주고, 스테이지 별로 작동하도록 구성한다.

FROM TO 를 이용해서 작성할 수 있다.

@keyframes slide {
  from {
    left: -100px;
    opacity: 0;
  }
  to {
    left: 300px;
    opacity: 1;
  }
}

 

 

0%, 100%로 스테이지를 부여해서 작성할 수 있다.

@keyframes slide {
  0% {
    left: -100px;
    opacity: 0;
  }
  100% {
    left: 300px;
    opacity: 1;
  }
}

글자가 왼쪽에서 오른쪽으로 Slide 된 모습

 

스크롤을 내리자 없어진 모습

 

https://www.youtube.com/watch?v=ru5FGYuycwY  해당 영상을 참고하여 작성하였다. (감사합니다.)