Transition
- transition : 어떤 상태(ex. hover)에서 다른 상태로 가는 변화를 애니메이션화 하는것임.
- transition 속성은 상태가 없는 요소에 붙어야한다.
그렇기 때문에 transition 은 state가 아닌 root엘리먼트에 적어야된다.
- transition은 state에 따라 바뀌는 속성을 갖고 있으면 사용 가능하다.
👇 아래 코드에선 hover를 통해 상태를 변화했기때문에 적용된다. 아래 코드를 실행해서 링크영역에 마우스 커서를 올리면(hover) , 상태가 변한다.
<style>
a {
transition: all 5s ease-in-out;
color: wheat;
background-color: tomato;
text-decoration: none;
padding: 3px 5px;
}
a:hover {
border-radius: 20px;
color: tomato;
background-color: wheat;
}
</style>
.
.
<body>
<div>
<a href="#">go home</a>
</div>
</body>
- ease-in function : 브라우저에게 변화하는 방법을 알려주는 역할
- linear : 일정한 속도로 변화
- ease-in : 시작과 끝이 빠름
- ease-out : 시작과 끝이 느림
- ease-in-out: 시작이 빠르고 끝이 느림
- transform은 무언가를 변형시키는것이다.CSS의 요소를 마치 3D처럼 구현가능하다.
- transform은 다른 box element에 영향을 끼치지 않는다. 즉, 다른 요소의 box를 변형시키지 않고, 원하는 요소를 변형시키거나 이동시키기 위해 사용한다.
<head>
<style>
img {
transition: transform 5s ease-in-out;
}
img:hover {
transform: rotateX(360deg) scale(2);
}
</style>
</head>
<body>
<div>hello</div>
<img src="logo.jpg" />
<span>hello</span>
</body>
Animation
- transition은 어떤 상태(ex. hover)에서 다른 상태로 변하는 걸 애니메이션으로 만듬.
=> hover과 같이 마우스를 올려놔야 재생되는것과 같은 특정 조건없이 계속 재생되는 애니메이션을 구현하고 싶으면 animation 속성을 사용해야함.
- 속성을 꼭
transform만 써야하는 건 아니지만 일부 property는 애니메이션이 잘 안되기 때문에 transform을 쓰는 걸 권함.
<style>
@keyframes 애니메이션명(키프레임명) {
from {
transform: rotateY(0);
}
to {
transform: rotateY(180deg) translateX(100px);
}
}
img {
animation: 키프레임명 5s ease-in-out infinite;
}
</style>
.
.
<body>
<div>hello</div>
<img src="logo.jpg" />
<span>hello</span>
</body>
<style>
@keyframes 애니메이션명(키프레임명) {
0% {
transform: rotateY(0);
}
50% {
transform: rotateY(180deg) translateY(100px);
}
100% {
transform: rotateY(0) translateY(0px);
}
img {
animation: 키프레임명 5s ease-in-out infinite;
}
}
</style>
.
.
<body>
<div>hello</div>
<img src="logo.jpg" />
<span>hello</span>
</body>
- 미디어쿼리는 디바이스별로 각기 다른 스크린 사이즈를 보여줄 수 있는 설정을 말한다.
- 미디어쿼리를 작성할 땐 @media screen and( 조건 ){ 요소 }를 이용한다. ( ) 이 괄호의 조건이 참이라면 { } 이 괄호의 코드를 실행하는것이다.
<style>
@media screen and (min-width: 1000px) and (max-width: 1200px) {
div {
background-color: wheat;
}
}
@media screen and (orientation: landscape) {
#one {
display: none;
}
}
</style>
</head>
<body>
<div>
<div id="one">hello</div>
<div id="two">hello2</div>
</div>
</body>
