Transition
요소의 상태 변화에 따른 스타일 변경에 애니메이션 효과를 부여한 것이다.
<button>Click me</button>
시작점에 transition 속성을 부여한다. 도착점에 변경하고자 하는 속성들을 값을 바꿔서 넣는다.
button {
padding: 20px;
border-radius: 20px;
background-color: tomato;
color: beige;
transition: background-color 1s ease-in, border-radius 0.5s ease-in-out;
}
button:hover {
background-color: beige;
color: tomato;
border-radius: 5px;
}
여러 속성들을 다른 애니메이션 효과를 줄 수 있다. 쉼표로 구분한다. 그런데 속성을 구분하지 않고 애니메이션 효과를 부여하고 싶으면 all을 값으로 준다.
transition: all 1s ease-in;
Transformation
요소의 모양을 변경할 때 사용하는 속성이다.
transform: rotateX(240deg) rotateY(150deg) rotateZ(200deg) translate(120px, 120px);
회전, 선형이동에 쓰는 용어들을 사용한다.
Animation
태그는 아래와 동일하다.
<body>
<div>
<span>🥰</span>
</div>
</body>
애니메이션에 적용할 요소들의 현재 스타일이다.
div {
width: 200px;
height: 200px;
background-color: tomato;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
span {
font-size: 100px;
}
애니메이션에 넣을 효과부터 정의한다. 진행도를 기준으로 각각의 상태(state)를 정의할 수 있다.
@keyframes rollingCoin {
0% {
transform: rotateZ(0) translateX(0px);
border-radius: 10px;
}
50% {
transform: rotateZ(180deg) translateX(5px);
border-radius: 150px;
}
100% {
transform: rotateZ(360deg) translateX(0px);
border-radius: 10px;
}
}
마지막에 요소의 상태가 변할 때 사용할 에니메이션을 가한다.
div:hover {
animation: rollingCoin 2s linear infinite;
}
참고로, 굳이 상태를 지정하지 않고 애니메이션 효과를 가할 수 있다.
div {
animation: rollingCoin 2s linear infinite;
}
Media Query
CSS는 사용자의 화면 크기를 감지할 수 있다. 화면의 크기가 일정한 범위에 있는 경우, 방향이 다른 경우에 따라 CSS를 다르게 적용할 수 있다. 요소의 태그는 다음과 같다.
<body>
<div>
<span>🥰</span>
</div>
</body>
처음 적용한 스타일은 다음과 같다. 애니메이션 효과도 미리 정의했다.
@keyframes rollingCoin {
0% {
transform: rotateZ(0) translateX(0px);
border-radius: 10px;
}
50% {
transform: rotateZ(180deg) translateX(5px);
border-radius: 150px;
}
100% {
transform: rotateZ(360deg) translateX(0px);
border-radius: 10px;
}
}
div {
width: 200px;
height: 200px;
background-color: tomato;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
다음과 같이 화면 조건을 부여할 수 있다. 화면이 조건을 충족하면 스타일이 적용이 된다.
@media screen and (max-width: 800px) {
div {
background-color: teal;
animation: rollingCoin 2s linear infinite;
}
}
유의할 점은 화면 변화에 따라 적용 될 선택자들의 이름이 일치해야한다. 아래의 div:hover 처럼 같은 요소라도 상태가 다르다면 다른 선택자로 보아 미디어쿼리의 효과가 적용되지 않는다.
@media screen and (max-width: 800px) {
div:hover {
background-color: teal;
animation: rollingCoin 2s linear infinite;
}
}
미디어쿼리를 통해 별의별 스타일 조건을 부여할 수 있다.
Media Queries 주요기능
- min-device-width
- max-device-width
- orientation: landscape
- orientation: portrait
- aspect-ration - 레티나디스플레이 감지가능
- display-mode
- inverted-colors
- lightlevel
- prefers-contrast
- resolution
- monochrome
Media type
- @media screen{}
- @media print{}
Transition, Transformation, Animation, MediaQuery를 모두 적용해봤다.
코드는 다음과 같다.
<html lang="kr">
<body>
<div>
<span>🥰</span>
</div>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
@keyframes rollingCoin {
0% {
transform: rotateZ(0) translateX(0px);
border-radius: 10px;
}
50% {
transform: rotateZ(180deg) translateX(5px);
border-radius: 150px;
}
100% {
transform: rotateZ(360deg) translateX(0px);
border-radius: 10px;
}
}
div {
width: 200px;
height: 200px;
background-color: tomato;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
span {
font-size: 100px;
}
@media screen and (max-width: 800px) {
div {
background-color: teal;
animation: rollingCoin 2s linear infinite;
}
}