꾸준히 성장하는 개발자

CSS - transition 본문

CSS

CSS - transition

ahleum 2022. 1. 27. 16:45

transition :       속성명                지속시간                   타이밍 함수                대기시간

           transition-property   transition-duration   transition-timing-function  transition-delay

                                                ↑지속시간: 단축형으로 작성할 때 필수 포함 속성

 -> 요소의 전환(시간과 끝) 효과를 지정하는 단축 속성

 

transition-property  -  전환 효과를 사용할 속성 이름을 지정

  • all              모든 속성에 적용(기본값)
  • 속성 이름     전환 효과를 사용할 속성 이름 명시  ex) width, color 등

 

trasition-duration 전환 효과의 지속시간을 지정

  • 0s        전환효과 없음
  • 시간     지속시간을(s)를 지정

 

transition-timing-function - 전환효과의 타이밍(Easing) 함수를 지정

  • ease            느리게-빠르게-느리게(기본값)
  • liner            일정하게
  • ease-in         느리게-빠르게
  • ease-out       빠르게-느리게
  • ease-in-out   느리게-빠르게-느리게

 

참고 사이트 

https://easings.net/ko

 

Easing Functions Cheat Sheet

Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function.

easings.net

 

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function

 

transition-timing-function - CSS: Cascading Style Sheets | MDN

The transition-timing-function CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.

developer.mozilla.org

google에 tweenmax easing 검색해서 보기

 

 

transition-delay 전환 효과가 몇 초 뒤에 시작할지 대기시간을 지정

  • 0s          대기시간 없음
  • 시간       대기시간(s)을 지정

 

 

'CSS' 카테고리의 다른 글

[css] 글 넘칠때 말줄임 ...  (0) 2023.01.30
[CSS] 웹폰트 최적화 - 서브셋폰트/woff  (0) 2022.07.26
[CSS] 스크롤바 없애면서 스크롤 동작 하게 만들기  (0) 2022.05.08
css - flex  (0) 2022.01.27
css 선택자  (0) 2022.01.26
'CSS' Related Articles more