hover 했을때 사각형 블록에서 원형으로 바뀌는 코드를 만들어 hover 값을 넣었다고 하면,
hover시 도형이 바로바로 변한다. 하지만 Transition을 사용하면 바로바로가 아닌 1초에 걸쳐 변하게 할 수 있다.
.circle {
width: 300px;
height: 300px;
background-color: magenta;
transition: background-color 1s 1s, border-radius 1s 2s;
}
.circle:hover {
background-color: cyan;
border-radius: 50%;
}
위같은 코드는 circle class를 hover했을때 원형으로 만드는 코드인데, transition을 넣었기 때문에
background-color는 1초만에 1초의 딜레이 ( 마우스를 1초 hover해야함 )를 가지고
원형으로 바뀌는데 1초만에 1초의 딜레이를 가진다.
transition : all 1s 1s를 하면 모든 요소가 1초만에 1초의 딜레이를 가지고 변한다.
또한 1초만에 변하는 시간의 타이밍도 정할 수 있다 .
section div {
height: 100px;
width: 100px;
background-color: turquoise;
margin: 20px 0;
transition: margin-left 3s;
}
section:hover div {
margin-left: 500px;
}
div:nth-of-type(1) {
transition-timing-function: ease-in;
}
div:nth-of-type(2) {
transition-timing-function: ease-out;
}
div:nth-of-type(3) {
transition-timing-function: cubic-bezier(0.7, 0, 0.84, 0);
}
div:nth-of-type(4) {
transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
}
위 코드는 section 안의 div들의 margin이 hover시 left로 3초만에 500px 이동하는 코드인데,
div 첫번째 두번째 세번째 네번째들이 같은 3초동안 움직이는 속도가 다 다르다 ( 동일한 3초에 진행된다 )
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
이렇게 timing function을 나누지 않고
transition: margin-left 3s 1s ease-in ;
을 넣으면 왼쪽으로 3초만에 1초의 딜레이를 가지고 ease-in의 타이밍을 가진다.
라고 입력도 가능하다.
'The Web Developer 부트캠프 2022' 카테고리의 다른 글
| transition과 transform 을 이용한 버튼 (0) | 2022.09.12 |
|---|---|
| transform (0) | 2022.09.12 |
| rgba, opacity position (1) | 2022.09.12 |
| Relative Css unites (0) | 2022.09.11 |
| Padding margin display (0) | 2022.09.11 |