Keyframe , animation 사용하여 생동감있는 글자 느낌 주

css animation을 사용하여 태그에 생동감을 줄 수 있다 

 

animaition을 사용하기에 앞서 animation에서 구현할 @keyframe을 정의하여야 한다. 

 

 

https://www.youtube.com/watch?v=AKgkKv0qKgw 를 참고 하자 

 

 

@keyframes 이름 {

 0% { ex margin-left:0; }

100% { margin-left:100px; }

}

 

*animation 속성 

animation-name: 

animation-duration:

animation-delay:

animation-direction:

animation-iteration-count:

animation-play-state

animation-timing-function:

animation-fill-mood:

 

보통 함축해서 사용한다 ->  animation : name duration function delay count direction ; 순으로 적으면

알아서 먹힌다. 

 

 

https://www.youtube.com/watch?v=AKgkKv0qKgw