[CSS] @keyframes 과 animation

 이전에 유튜브 보면서 keyframes만들어서 글씨에 animation효과를 준적이 있는데 좀 더 상세하게 공부하고 싶어서 공부 해봤습니닷!

💡@keyframes 과 animation에 대해 알아보자!

---

◎ keyframes 과 transition  차이

   transition : 변화하는 속성값이 있어야 작동함.(:hover /:checked )  

   keyframes : 변화값 작동, 스스로 작동, 반복가능, 순방향진행, 역방향진행, 양방향진행 가능

 

◎ [keyframes]시작과 끝을 지정해서 움직이게함

@keyframs 이름 {
from{}
to{}
}

@keyframs 이름 {
0%{}
...
100%{}
}

◎ [keyframes]을 사용하기 위해서는 animaion속성을 알아야함

animation-name : 내가 만들 애니매이션의 이름을 적어줌.

                <숫자,특수문자로 시작하면 안됨 / 문자열, -, _ 으로 시작 가능>

animation-duration : 애니매이션이 작동되는 시간을 지정.

                   < 1s(1초), 0.1s(0.1초), 1000ms(1초), 100ms(0.1초) > 

animation-delay : 애니메이션 지연시간 / 요소가 로드되고 지연시간이 지나면 애니메이션이 작동됨.

animation-direction : 애니메이션의 진행방향.

                    < normal:순방향 / alternate:역방향을 번갈아가며 진행 / reverse:역방향 >

animation-iteration-count : 애니메이션의 진행횟수 또는 반복 < 횟수 or infinite:무한반복 >

animation-pray-state : 애니메이션의 진행횟수 또는 반복 < paused:멈춤 / running:진행 >

animation-timing-function : 전환속도의 효과

                     < linear / ease-in / ease-out / ease-in-out / ease >

animation-fill-mode : 애니메이션이 끝난 후 처음으로 이동할지 끝을 유지할지를 설정

                    < none:지정없음 / forwards:마지막 키프레임 유지 / backwards:시작 전 스타일을 미리 적용 / both:forwards, backwards둘다적용 >

 

◎  함축사용방법

animation : 애니메이션이름 1s linear 0.1s infinite both;
순서 : name / duration / timing-funtion / delay / iteration-count / direction

 

참고한 슨생님의 강의 : https://www.youtube.com/watch?v=AKgkKv0qKgw