CSS 요소에 에니메이션 효과 주기

 

2가지 방법이 있다고함

 

아무런 이벤트를 주지 않아도 요소가 지정시간 만큼 애니메이션이 이루어 지게 됨 

이것도 잘 안쓸거 같은데 ..

 

 

 

0 에서 300픽셀 만큼 움직여라~~

그리고 컨테이너에 이름 몇초 어떤 스피드로 할것인지

 

오른쪽으로 300px 움직여지는거 확인함

 

 

계속 반복하고 싶으면

시간 함수 뒤에 infinite 쓰면 됨 무한의 이런 뜻인가봄

 

        animation: my-animation 3s ease-in-out infinite;

 

 

계속 움직여지는거 확인

 

 

근데 애니매이션이끝나면 즉각 바로 돌아가서 다시 시작하는게 마음에 안든다고함 (난 괜찮은데...)

 

 

 

이렇게 바꿔주면

 

왓다리 갓다리 하는거 확인 함

쓸려나.. 안쓸거 같은데 이건 

 

 

 

 

 

 

 

 

 

여기로 바뀜 

 

다음은 홈페이지 만들어보자!!!!