1. 학습한 내용
어제까지의 학습이 css를 사용해서 웹 요소에 시각 효과를 추가하는 방법을 공부했다면, 오늘은 애니메이션이 어떻게 동작하는지 공부하는 시간을 가지게 되었다. 예전에는 이런 기능들을 자바스크립트로 하였지만, css로도 훌륭하게 애니메이션을 구현할수 있다.
1. Transform
2. Transition
3. Animation
1.Transform : 텍스트나 이미지 등을 움직이는것
2차원 변형과 3차원 변형이 존재한다.
2차원 변형 함수
translate (x,y) : 지정한 크기만큼 x,y축으로 이동
translateX (x) : 지정한 크기만큼 x축으로 이동
translateY (y) : 지정한 크기만큼 y축으로 이동
scale (): 지정한 크기만큼 확대축소
rotate(각도) : 지정한 각도만큼 회전
skew () : 지정한 각도만큼 x축,y축으로 왜곡
3차원 변형 함수는 z축을 추가하면 된다.
여러 브라우저의 이전 버전에서는 그냥 사용할 수 없다.(ex. 익스플로러는 10.0이상에서만 사용 가능) 이전 버전 브라우저에서 사용하려면 prefix 사용한 버전의 코드를 추가해주어야 한다. 이때 prefix 없는 형태는 default로 같이 넣어주어야 한다.
-webkit-transform: chrome,safari
-moz- : firefox
-ms : explorere
-o : opera
-
Transition
웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것을 말한다.
transition-property : transition 대상을 지정
transition-duration : transition을 실행할 시간을 지정
transition-timing-function : transition의 실행 형태를 지정
transition-delay : transition의 지연 시간을 지정
transition : 위에 나열한 모든 속성을 한꺼번에 지정. -
Animation
말 그대로 웹 요소에 애니메이션을 추가하는것인데, 애니메이션 중간에 스타일이 바뀌는 지점을 keyframe이라고 한다.
@keyframes 속성으로 정의하고, animation속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부를 결정한다.@keyframes : 애니메이션이 바뀌는 지점을 지정.
animation-delay : 애니메이션의 시작 시간을 지정.
animation-direction : 애니메이션을 종료한 뒤 처음부터 시작할지, 역방향으로 진행할지 지정.
animation-duration : 애니메이션의 실행 시간을 지정한다.
animation-iteration-count : 애니메이션의 반복 횟수를 지정.
animation-name : @keyframes로 설정해 놓은 중간 상태를 지정.
animation-timing-function : 키프레임의 전환 형태를 지정.
animation : animation 속성을 한꺼번에 묶어서 지정.
-
애니메이션의 방향을 지정하는 animation-direction 속성
animation-direction: normal / reverse / alternate / alternate-reverse
normal 애니메이션을 from에서 to로 진행 (default값)
reverse 애니메이션을 to에서 from으로, 원래 방향과는 반대로 진행
alternate 홀수 번째는 normal로, 짝수 번째는 reverse로 진행
alternate-reverse 홀수 번째는 reverse로, 짝수 번재는 normal로 진행반복 횟수를 지정하는 animation-iteration-count속성
animation-iteration-count : <숫자> / infinite
숫자대로 반복하거나 무한 반복이다.
2. 실습
github source code
1.https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/3
2.https://github.com/Yeonsu-Hong/Daegu-AI-school/issues/4
실습한 것
1. 형태와 색상이 바뀌는 메뉴박스
2. 박스에서 원으로 바뀌면서 이동하는 색상이 변하는 도형
3. 슈퍼마리오 동전효과
4. zoom-in photo (with paragraph)
× 학습에 참조한 site
https://animate.style/
애니메이션 소스 코드
https://jeremyckahn.github.io/stylie/
각각 여러종류의 웹브라우저에서의 동적 애니메이션 효과를 웹에서 구현
3. 어려웠던 내용
슈퍼마리오 동전 효과에서 박스와 동전이 겹쳐지지 않게 그리고 동전이 최종적으로 사라지게 할때의 effect가 나혼자서 구상을 하려면 머리를 좀 써야한다는게 어려웠다. 예를 들어 게임에서의 여러가지의 effect가 있는데 이러한 부분도 예시로 삼아 혼자서 연습을 하여야 겠다는 생각이 들었다.
4. 해결 방법
코드펜이라던지 여러가지 블로그나 검색을 통해 여러가지 효과를 구현 해보아야 할것 같다. 기본개념을 가지고 응용할수 있는것이 진정한 개발자라고 생각한다.
5. 소감
앞서 배워왔던 내용들보다 동적인 효과가 들어가서인지 강의 분량은 2배였지만, 재미가 있었다. 현재 앞에부분을 계속 review하고 있는데 빨리 현재진도와의 접점을 만들고 무한 반복하면서 응용할수 있는 부분들은 주말에 따로 하여야 할것 같다.
