Interactive Website - Transforms, Transitions, Animations 메모

Transforms

https://developer.mozilla.org/en-US/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

MDN 문서를 보면 transform을 통해서 translate, rotate, scale and skew를 할 수 있다. 그리고 3d를 기준으로도 할수 있다. 

 

 

Transitions

Transition은 한 상태에서 다음 상태로 얼마동안의 시간을 거쳐서 변하는지를 지정한다. 점진적으로 속성이 변하게 된다. 

• transition-property: 전이가 되야하는 속성을 지정해준다
• transition-duration: 전이가 처리되는 시간을 지정한다
• transition-delay: 전이가 시작되기전에 기다려야하는 시간을 지정한다
• transition-timing-funciton: 진행속도의 형태를 지정한다. 기본으로 정해진 속성도 있고 https://cubic-bezier.com/#.17,.67,.83,.67 여기서 직접 그릴수도 있다. 
• transition: 여기에 한번에 다 정의할 수도 있다. 

그리고 중간상태가 정의될 수 있는 것들이 transition이 적용될 수 있는 속성이다. color같은것은 색상이 변하니까 중간 값이 뭔지 계산가능해서 transition 가능하다. 

 

 

Animations

Transition처럼 동적인 처리를 할 수 있는데, @keyframe 을가지고 시점을 지정하고 반복처리 등을 할 수 있다. @keyframe을 하나 정의하고 여러 곳에서 사용도 가능하다. 

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event

HTMLElement: animationend event - Web APIs | MDN

 

그리고 animation은 animationed event를 발생 시켜서 animation 관련 이벤트에서 처리할 것들을 붙일 수도 있다. 

 

 

Reference

- 잘되어있는 곳: https://seulbinim.github.io/WSA/transform.html#transform-%EC%86%8D%EC%84%B1

Transform(변형) | 웹접근성과 웹표준

 

- 세미나: https://frontendmasters.com/courses/css-in-depth-v2/2d-transform-functions/

Learn 2D Transform Functions – CSS In-Depth, v2