element가 다른 상태로 전환될 때, 그 외형을 바꿀 수 있다.
ex) link위에 hover하면 color를 변경
The Properties
- transition-property
- 변경하려고 하는게 어떤거?
- transition-duration
- 얼마나 길게 전환이 되는가?
- transition-timing
- 순차적으로 부드럽게 전환이 되는가?
- transition-delay
- 전환 시작 전에 얼마나 기다려야 하는가?
transition 사용하기 위한 순서
- element 정의
- transition을 위한 element 선택
- 새로운 값 정의
pseudo-class하고 같이 해야됨
div {
color: #000000;
background: #2db34a;
width: 250px;
transition-property: color, width;
transition-duration: .5s;
transition-timing-function: linear;
transition-delay: .5s;
}
div:hover {
color: #ffffff;
width: 350px;
background: #2D31B3;
border-radius: 50%;
}
Using shorthands
여러개 transition property 를 가졌다면, shorthand를 사용하는게 낫다.
transition: background .2s linear, border-radius 1s ease-in 1s;
Review
- transition은 재미 있는 측면을 만드는 데 사용할 수 있다.
- element 상태를 더 잘 이해할 수 있게 도와준다. (active, focus … )
- 접근성은 항상 고려해야 한다.
공부 위치 – https://www.coursera.org/learn/introcss/lecture/JmJhE/03-02-transitions
Leave A Comment