주제선정 이유
좋은 UI는 사용자가 실행한 액션에 대해서 확실한 피드백을 줄 수 있어야 합니다.
css애니메이션 속성은 가장 간단하면서도 확실한 효과를 기대할 수 있습니다.
내용
Transition
속성 변경이 즉시 영향을 미치게 하는 대신
그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있게 제공되는 옵션
Animation
요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있는 옵션
예제
간단정리
•
CSS transform
◦
오브젝트를 돌린다던가 위치를 옮기거나 축소/확대 시켜준다.
◦
오브젝트의 크기 혹은 위치 수정
•
CSS transition
◦
transform이 동작을 할때 애니메이션을 추가해주는것.
◦
영상편집의 이펙트 추가하는 것과 비슷
•
will-change (transform)
◦
GPU를 통해서 오브젝트를 보여주도록 하는것. (너무 남발하면 CPU를 이용하는 것보다 훨씬 느려진다.)
◦
렌더링을 할때에 GPU가속의 차이같은 느낌
•
keyFrame
◦
시간별로 transform을 설정해서 내가 원하는 액션을 만들어 줄 수 있다.
◦
영상 이펙트를 줄때에 시간별로 어느정도 이펙트를 줄지 설정하는 것과 유사
•
animation
◦
내가 만든 keyframe을 이용할 수 있게해준다.
•
hype4 프로그램이 뭔지 살펴보기만 하자