움직이는 웹사이트 제작 3 - Animation

이제 애니메이션에 대해서 공부해 볼 것이다. 이전 단원에서는 transform과 transition에 대해서 배웠다. 이 둘은 어떤 조건이 있을 때 적용하는 것이고, 애니메이션은 조건과 관계없이 사용하는 것으로 웹 사이트에 접속하자마자 애니메이션 효과가 나타난다.

---

 

 

 

이론 3 - Animation

 

 

changeWidth는 개발자가 임의로 작성한 내용물로 원하는 속성값으로 바꿀 수 있다. interation을 6회로 주었다. 애니메이션 진행방향은 direction으로 사용하는데, normal은 시작에서 끝으로 가는 것이고, reverse는 끝에서 시작으로 가는 것이다. alternate는 시작과 끝 방향이 반복되는 것이다.

@keyframs에는 이러한 변화를 줄 이름을 작성해 준다. 위에는 조건이고 아래를 실제로 동작될 결과값을 의미한다. from은 시작, to는 끝나는 지점이다.

---

 

 

 

 

실습 3 - CSS Animation

 

 

 

 

---

 

 

 

코드 작성하기

애니메이션 이름은 가로폭이 달라지는 changeWidth이다. 앞에는 조건을 뒤에는 애니메이션의 결과값을 지정해 준다.

 

 

 

 

 

역시 노란색 바가 왼쪽 오른쪽으로 움직이는데, 6번 계속 반복하는 건 아니고 한번 하면 끊어졌다. 근데 이건 원래 그렇다고 한다.

 

 

 

 

 

코드 제출이 잘 되었다.

---

 

 

 

 

 

퀴즈 3 - Animation

 

 

 

조금 어려웠지만 혼자서 잘 풀었다. delay는 끝나기 전까지가 아니라 시작하기 전 지연 시간이다.

 

---

 

 

 

학습을 마치고

세 번째 학습도 모두 잘 마쳤다. 새벽 시간에 3주 차 단원을 모두 마치려고 했는데 충분히 그럴 수 있을 것 같은 예감이 든다. 이제 이론 학습도 하나만 남은 상태다. 

다음 학습은 분량이 조금 많다.