#4.0

Transitions

이전 CSS에서는 Variable, Color, State, Selector에 대해 모두 끝냈다. 지금부터는 고급 css 컨셉을 배운다.

e.g. Animation, Transformation, Tarnsition등과 같은...

css는 css가 할 수 있는 부분에서 아주 심화되어 있다. 예전에는 효과를 주기위해서는 프로그래밍 언어가 필요했지만 지금은 css가 다 할 수가 있다.

Transitions은 어떤 상태에서 다른 상태로의 변화 를 애니메이션으로 만드는 방법이다.

a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
      }
      a:hover {
        color: tomato;
        background-color: wheat;
      }

일방적인 css코드로 변화를 주면 매우 빠르고 부드럽지않게 상태가 변화하게 된다.(보기 별루다...)

Transition은 state속성이 없는 css태그에 싸용해야 한다. 즉, 위에서는 a:hover{} 가 아닌 a{}에 써야한다.

a {
        color: white;
        background-color: tomato;
        text-decoration: none;
        padding: 3px 5px;
        border-radius: 5px;
        font-size: 55px;
        transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
      }
      a:hover {
        color: tomato;
        background-color: wheat;
      }

a{}에 있는 transition에 있는 background-color와 color를 지정하여 변화하게 하였다. a:hover {} 에서 a{}에 지정된 backgroud-color와 color의 색깔이 다르면 transition 효과를 받는다. 즉, transition은 hover에 있는 background-color와 color를 찾고 a{}:에 있는 background-color와 color가 다르게 된다면 그 변화를 애미네이셔능로 바꾸는 거다.

 transition: background-color 0.5s ease-in-out;

background-color가 다르면 0.5초동안 바뀌는 과정을 거친다.

transition: all 5s ease-in-out;

• 변화하는 모든 것에 transition을 준다.

state에도 transition을 줄 수 있지만 state를 벗어나면 transition이 적용이 안된다.