실무/CSS
-
[CSS] animations실무/CSS 2021. 8. 13. 01:53
- CSS animations 구성 요소 animation property @keyframes - animation property : animation 할 요소의 스타일을 지정 => CSS animation 시퀀스 생성 animation-name animation keyframe을 설명하는 @keyframes의 이름을 지정 animation-duration animation 한 주기를 완료하는데 걸리는 시간 animation-timing-function animation 타이밍을 구성 가속 곡선을 설정하여 animation이 keyframe을 통해 전환되는 방식 예) linear, ease-in-out, step, cubic-bezier 등 https://developer.mozilla.org/en-U..
-
[CSS] transitions실무/CSS 2021. 8. 12. 00:24
- CSS transitions CSS 속성(properties)을 변경할 때 애니메이션 속도를 조절하는 방법을 제공 속성 변경은 즉시 영향을 미치는 대신, 일정 기간에 걸쳐 일어나도록 가능 초기 상태와 최종 상태 사이의 중간 상태는 자동적으로 계산된다. 애니메이션 시작 시기(지연 설정), 전환 지속 시간(기간설정), 전환 실행 방법 속성 지정 가능 transition-property transition을 적용해야 하는 CSS 속성의 이름을 지정 명시된 CSS 속성들만 애니메이션 발생 transition-duration transition이 발생해야 하는 기간을 지정 모든 속성에 동일한 기간을 지정하거나 각 속성에 다른 기간 지정 가능 transition-timing-function 속성에 대한 중간 값..