[CSS] transition
CSS에는 한 요소가 다른 값으로 변화할 때 애니메이션을 부여할 수 있는 속성인 'transition'이 존재한다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
일반적으로 'transition'이 적용되지 않은 모습이다.
마우스를 올렸을 때 즉각적으로 속성이 변한다.
'transition'은 애니메이션 효과를 주어서 시간에 걸쳐 부드럽게 변하도록 한다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
'transition'은 property name, duration, timing function, delay의 4가지 값을 가지고 각 값은 생략이 가능하다.
Property Name
'property name'은 애니메이션을 적용할 속성을 나타낸다.
속성 이름 대신 'all'을 사용하여 모든 속성을 나타낼 수 있다.
생략 시 기본값으로 'all'이 적용된다.
다음과 같은 형태로 각 속성에 대해 서로 다른 'transition' 값을 부여할 수 있다.
div {
transition:
background-color 1s ease-in 0.3s,
width 2s;
}
'transition-property' 속성을 통해 따로 설정할 수 있다.
Duration
'duration'은 애니메이션의 총 시간을 나타낸다.
생략 시 기본값으로 '0s'가 적용되지만 그렇게 되면 애니메이션의 의미가 사라지기 때문에 생략하지 않는다.
'transition-duration' 속성을 통해 따로 설정할 수 있다.
Timing Function
'timing function'은 애니메이션의 속도를 나타낸다.
생략 시 기본값으로 'ease'가 적용된다.
'transition-timing-function' 속성을 통해 따로 설정할 수 있다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
일반적으로 위와 같은 키워드를 사용하여 'timing function'을 설정한다.
'steps', 'cubic-bezier' 함수를 사용할 수도 있다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
Delay
'delay'는 애니메이션을 지연하는 시간이다.
생략 시 기본값으로 '0s'가 적용된다.
'transition-delay' 속성을 통해 따로 설정할 수 있다.
'Web > CSS' 카테고리의 다른 글
[CSS] 다양한 폰트(글꼴) 사용하기 (feat. Google Fonts) (1) | 2023.11.17 |
---|---|
[CSS] 상대 단위 em과 rem (1) | 2023.11.09 |
[CSS] 투명도 설정 (feat. opacity, rgba) (1) | 2023.11.07 |
[CSS] %, 백분율 단위 (CSS percentage) (1) | 2023.11.03 |
[CSS] 적용 우선순위 (16) | 2023.11.02 |