[CSS] transition

transition 은 css 의 속성값(color, width, font 등) 을 일정시간동안 변화할 수 있게 해주는 속성이다. 

 

1. transition-property

 

transition-property 는 transition 이 되는 속성값을 지정할 수 있다. 

 

p {
    transition: 2s 1s;
    transition-property: width color;
    width: 150px;
    height: 150px;
    color: red;
}

p:hover {
    width: 250px;
    color: blue;
}

 

transition-property 를 통해 width 와 color 속성만 변화할 수 있게 지정했다. 각각 width 는 2s, color 는 1s 동안 변하게 된다. 

 

 

 

2. transition

 

transition 과 관련한 여러가지 속성들(transition-property, delay, duration, timing-function)을 transition : ~ 를 통해 한번에 사용할 수 있다. 

 

transition : property duration timing-function delay