Transition3 CSS-애니메이션(Animation) Icon 예제 - animation icon 공통 스타일 1. CLOCK & HOURGLASS 2. LOADER 1, 2 3. LOADER 3, 4 4. LOADER 5, 6 5. LOADER 7, 8 > 6. LOADER 9, 10 2020. 8. 24. CSS-애니메이션(Animation) 애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킨다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 sequence를 나타내는 복수의 키프레임(@keyframes) 들로 이루어진다. 일반적으로 트랜지션(transition) 효과는 :hover 와 같은 가상 클래스 선택자(Pseudo-Class Selector) 또는 자바스크립트의 이벤트와 같은 부수적 액션에 의해 발동된다. 즉 transition 프로퍼티는 단순히 요소의 프로퍼티 변화에 주안점이 있다면 animation 프로퍼티는 하나의 줄거리를 구성하여 줄거리 내에서 세부 움직임을 시간 흐름 단위로 제어할 수 있고 전체 줄거리의 재생과 정지, 반복까지 제어할 수 있다... 2020. 8. 24. CSS-속성전환(transitions) 트랜지션(transition)은 background, color, width, height, fransformation 등의 CSS 속성 값이 변화할 때, 일정 시간(duration)에 걸쳐 부드럽게 변경할 수 있도록 하는 것이다. 속성 값 설명 기본값 transition-property 트랜지션의 대상이 되는 CSS 속성 지정 all transition-duration 트랜지션이 일어나는 지속 시간 지정 0s transition-timing-function 트랜지션 효과를 위한 수치 함수 지정 ease transition-delay 속성이 변화한 시점과 트랜지션이 시작하는 사이의 대기 시간 지정 0s transition 모든 트랜지션 속성을 한번에 지정 (Shorthand) transition: pro.. 2020. 8. 24. 이전 1 다음
