- Transition
상호작용을(states) 하였을때 변화과정을 애니메이션처럼 보여주는 효과이다.
규칙1 : transition은 states가 아닌 root인 element에 들어가야 작동이 된다.
규칙2 : transiton에 변화를 준것은 states에 들어있는 것들이 기준이 되어 바뀐다.
(애니메이션 효과를 볼 수있는 사이트)
참고자료 : https://matthewlein.com/tools/ceaser
- Transform
다른 요소의 box를 변형시키지 않고 원하는 요소를 이동 시키기 위해서 사용한는 것. 3D차원에서 움직이기 때문이다. rotate, translate, scale, skew, matrix 둥이 있다.
transform mdn 에서 많은 작용들이 있으니 한번씩 찾아보는것도 좋을것 같다.
- CSS에서 기본 Animation
<style>
@keyframes supersexyCoinFlip {
from {
transform: rotateY(0);
}
to {
transform: rotateY(360deg);
}
}
img {
border: 5px solid black;
border-radius: 30%;
animation: supersexyCoinFlip 5s ease-in-out infinite;
}
</style>
- 2단계가 아닌 여러 단계로 원할때는 %를 쓸 수 있다.
<style>
@keyframes supersexyCoinFlip {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg) translateY(100px);
}
100% {
transform: rotate(0);
}
}
img {
border: 5px solid black;
border-radius: 30%;
width: 1000px;
animation: supersexyCoinFlip 5s ease-in-out infinite;
}
</style>
애니매이션 적용이안되는것 : font-size
CSS animation sample site : https://animista.net/
- Media query
오직 CSS만을 이용해서 스크린의 사이즈를 알 수 있는 방법.
div {
background-color: coral;
width: 400px;
height: 400px;
}
@media screen and (max-width: 2000px) {
div {
background-color: gold;
}
}
사각형의 div의색상이 2000이하가 되면 coral -> gold색으로 바뀐다.
추가 TIP
- 브라우저에서 inspect의 device toolbar를 이용하여 핸드폰 기종 별 사이즈로 브라우저를 볼 수 있다.
- media screen에 (orientation: landscape(세로) or portrait(가로))를 이용하면, 세로모드인지 가로모드인지도 구별 할 수 있다.
댓글