Transition
두 상태(state)를 자연스럽게 이어지게 만들어주는 속성이다. 바로 property를 받아들이게 하지 않고 그 사이에 설정된 만큼의 딜레이를 주거나 해서 자연스럽게 이어지는 애니메이션을 부여하게 해준다. 기본 문법은 다음과 같다.
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
transition은 shorthand property로 위에 네가지 property를 한 줄로 표현할 수 있다. 그렇게 했을 때의 문법은 다음과 같다.
transition : propertyname(색깔, 배경 등등) duration(지속시간 단위는 s) transition-timing-function(ease in 등 어떤 방식으로 중간 요소를 표현할 지) delay(지연시간, 어느 정도 이후 기다리다가 효과를 발동시킬지)
div {
transition: <property> <duration> <timing-function> <delay>;
}
이런식으로 요약할 수 있겠다.
두개 이상의 property를 한 번에 적용하려면 comma를 이용해 구분하면 된다.
transition: width 2s, height 4s;
각각의 구성요소들은 원래 각기 따로 쓸 수 있는 property이다. 간단하게 표현하기 위해 short hand property(축약형)인 transition만을 적어놨다.
transition timing function을 보다 세부적으로 조절하는 단어들은 다음과 같다.
- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- 기본값으로 ease가 설정되어 있다. 느리게 빠르게 느리게로 설정되어있다.
- linear - specifies a transition effect with the same speed from start to end
- 처음부터 끝까지의 변화속도가 균일하게
- ease-in - specifies a transition effect with a slow start
- 첫 시작을 느리게
- ease-out - specifies a transition effect with a slow end
- 끝을 느리게
- ease-in-out - specifies a transition effect with a slow start and end
- 처음과 끝을 다 느리게
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
- cubic bezier라고 부르는 곡선을 만듦(이부분은 공부 필요해보임)
transition + transform
transform 이라고 하는 property는 각도 등을 변수로 받아서, 도형의 위치나 모습등을 변화시킨다.
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 5s;
}
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
W3Schools online HTML editor
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
참고할만한 링크
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Using CSS transitions - CSS: Cascading Style Sheets | MDN
CSS transitions provide a way to control animation speed when changing CSS properties. Instead of having property changes take effect immediately, you can cause the changes in a property to take place over a period of time. For example, if you change the c
developer.mozilla.org
https://www.w3schools.com/css/css3_transitions.asp
CSS Transitions
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
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
'IT 관련 > 개발(Codecademy)' 카테고리의 다른 글
Nav bar / breadcrumbs 의 종류 (0) | 2022.12.01 |
---|---|
CSS shadow 버튼 모음 사이트 소개 (0) | 2022.11.30 |
CSS typography / CSS 폰트 및 타이포그래피 (0) | 2022.11.26 |
CSS 심화 / FED 코드카데미 프론트엔드 디벨로퍼 코스 / title의 문제 (0) | 2022.11.24 |
윈도우즈 환경에서의 Bash 사용 / Git bash 활용 (0) | 2022.11.22 |