-Trasition(트렌지션)

 state(active,hover,visited,focus)가 바뀔떄 어떻게 바뀔지를 효과를 줌

ex.
.box:hover {
backgrounds-color: red;
transition: margin-rigth 5s(변화시간, 5초동안) .5s(대기시간, 0.5초 후에);
}
-Transformation(트렌스포메이션)

ex. transform: rotate(20deg);

transition과 함께쓰면 더욱 효과적인다.

-Animation(애니메이션)

.box {
width=500px;
height=500px;
animation:  1s NAME infinite 효과;
}
ex1. 줄어들고 끝
@keyframes NAME {

   from{ transform:none;  }

   to{  transform: rotate(1turn) scale(.5, .5);   }

}
ex2. 줄어들고 다시 커짐

@keyframes NAME {

  0%{ transform:none;  }

  50%{  transform: rotate(1turn) scale(.5, .5);   }

  100%{transform:none;  }
}

-media queries

body {
background-color:red;
}
@media screen and (min-width:320px) and (max-width:630px) {
   body  {
       background-color : blue;
     }
}
-> 화면이 줄어드면 배경화면이 파랑색으로 줄어들게 만들 수 있다.