Home
home
🏡 홈
home

7회 세미나 - CSS Transition / Animation / Keyframe

날짜
2020/01/17
발표자
시몬
참가
제이슨
김윤수
맥스
데릭
크롬
공개여부
공개
생성일
2023/11/13 08:53
발표자료

주제선정 이유

좋은 UI는 사용자가 실행한 액션에 대해서 확실한 피드백을 줄 수 있어야 합니다. css애니메이션 속성은 가장 간단하면서도 확실한 효과를 기대할 수 있습니다.

내용

Transition
속성 변경이 즉시 영향을 미치게 하는 대신
그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있게 제공되는 옵션
Animation
요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있는 옵션
예제

간단정리

CSS transform
오브젝트를 돌린다던가 위치를 옮기거나 축소/확대 시켜준다.
오브젝트의 크기 혹은 위치 수정
CSS transition
transform이 동작을 할때 애니메이션을 추가해주는것.
영상편집의 이펙트 추가하는 것과 비슷
will-change (transform)
GPU를 통해서 오브젝트를 보여주도록 하는것. (너무 남발하면 CPU를 이용하는 것보다 훨씬 느려진다.)
렌더링을 할때에 GPU가속의 차이같은 느낌
keyFrame
시간별로 transform을 설정해서 내가 원하는 액션을 만들어 줄 수 있다.
영상 이펙트를 줄때에 시간별로 어느정도 이펙트를 줄지 설정하는 것과 유사
animation
내가 만든 keyframe을 이용할 수 있게해준다.
hype4 프로그램이 뭔지 살펴보기만 하자