it 수업 3주차 (46) Animation

(1)

 

 

● 무한대로 움직임

    animation-iteration-count: infinite;

● 왔다갔다

    animation-direction: alternate;

 

 

 

 

<실행화면>

 

 

 

 

(2)

 

 

 

 

 

<실행화면>

 

 

(3)

 

 

 

 

<실행화면>

 

왼쪽에서 오른쪽으로 움직이면서 크기와 색이 바뀐다.

 

 

 

 

(4)

 

 

● 천천히 -> 빠름 -> 천천히

    animation-timing-function: ease;

● 천천히 -> 빠름

    animation-timing-function: ease-in;

● 빠름 -> 천천히

    animation-timing-function: ease-out;

● 천천히 -> 보통 -> 천천히

    animation-timing-function: ease-in-out;

● 일정 속도

    animation-timing-function: linear;

 

 

 

 

<실행화면>