# Transition
Transition: 어떤 상태에서 다른 상태로 가는 변화를 애니메이션화
- 변하는부분 전환시간 전환효과(ease-in-function)
ex. transition: background-color 10s ease-in-out;
->(텍스트는 바로 바뀌지만) 배경색만 천천히 바뀌고 천천히 돌아옴
,를 써서 동시에 여러 트랜지션을 설정할 수도 있다
전체 선택이라면 all 사용 가능
ex. transition: background-color 10s ease-in-out,
color 3s ease-in-out
ex. transition: all 10s ease-in-out;
**중요!
1. transition 에 무언가를 새로 적용시키려면 트랜지션이 가리키는 대상에도 반드시 해당 태그가 존재해야 함
2. transition이라는 속성은 state가 없는 요소에 붙여야 함. 반드시 원래 element에 있어야만 정상적으로 적용된다
ex. a:hover{ transition: } (X)
a{ transition: } (O)
ease-in-function -> 애니메이션이 어떻게 변하는지 알려줌
(애니메이션 자세히 확인하려면 Ceaser 사이트 참고)
linear -> 같은 속도로, 좌우 직선으로 움직임
ease-in -> 시작점에서보다 점점 빨라지면서 움직임
ease-out -> 시작점에서보다 점점 느려지면서 움직임
ease-in-out -> 느림 - 빨라짐 - 느림
easer
-> Equivalent to cubic beizer
-> cubic beizer 는 또 하나의 다른 property 인데 나만의 커브(속도)를 만들 수 있도록 하기 때문에 유용하다.
ex. transition: all 1000ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Css Transition</title>
<style>
a {
color: blue;
background-color: salmon;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 100px;
transition: all 1000ms
cubic-bezier(0.420, 0.000, 0.580, 1.000) ;
}
a:hover {
color: salmon;
background-color: blue;
}
</style>
</head>
<body>
<a href="#">Go homeee</a>
</body>
</html>
# Transformation
- border-radius: 50%; 를 하면 원이 된다
- transform: rotateY(70deg);
-> Y축으로 70도(deg) 회전 (3d 상태에서 돌린다고 생각)
-> 90도 돌리면 일자이기 때문에 볼 수 없음
-> rotateX / rotate Y / rotate Z
- transform: scaleX(2);
-> X축으로 scale(크기 변경)을 2배로 만들기
-> X, Y 둘 다 2배 만들려면
transform: scale(2,2);
transform: translateX(-600px);
-> X축으로 -600px만큼 움직이기 (왼쪽으로 600px 움직임)
transform: skewY(50deg);
-> Y축으로 50도만큼 비스듬히 기울이기
**주의
1. transform이 형제 태그까지 같이 변화시키지는 않는다. 지정된 부분만 움직임
ex. body에 img 와 p, span 태그가 있을 때
style에 img {transform:} 하면 img에만 적용되고 나머지에는 적용되지 않음
=> transform은 다른 요소의 box를 변형시키지 않고 원하는 요소를 이동시키기 위해서 사용하는 것!
2. transform 은 트랜지션과는 달리 state에 작성 가능 (****transition은 root에만 있어야 했음)
ex.
img {transition: transform 1s ease-in-out;}
img:hover {
transform: rotateZ(90deg);
background-color: green;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Css Transition</title>
<style>
img {
border: 10px solid black;
border-radius: 50%;
transition: transform 1s ease-in-out;
}
img:hover {
transform: rotateY(300deg) scale(0.5) ;
background-color: green;
}
</style>
</head>
<body>
<img src="img folder/피드백_감정상태.png" />
<h1>안녕하세영</h1>
</body>
</html>
# Animation
애니메이션 만들기(마우스 움직임 없이)는 다음과 같이 작성하면 된다
-> @keyframes 애니이름
ex.
@keyframes 동전뒤집기 {
from { transform:rotateY(0deg);}
to { transform:rotateY(360deg);}
}
img {
border-radius: 50%;
border: 10px solid rgb(255, 196, 0);
animation: 동전뒤집기 5s ease-in-out infinite;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Css Transition</title>
<style>
@keyframes 동전뒤집기 {
from {
transform:rotateY(0deg);
}
to {
transform:rotateY(360deg);
}
}
img {
border-radius: 50%;
border: 10px solid rgb(255, 196, 0);
animation: 동전뒤집기 3s ease-in-out infinite;
}
</style>
</head>
<body>
<img src="img folder/coin.png" />
<h1>안녕하세영</h1>
</body>
</html>
# memo
- animista.net: 애니메이션 효과 볼 수 있는 사이트
- animation 복습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Css Transition</title>
<style>
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
}
@keyframes 동전뒤집기 {
0% {
transform:rotateY(0deg);
opacity: 0;
}
25% {
transform: scale(2);
opacity: 0.75;
}
50% {
transform:rotateY(180deg) translateY(100px);
border-radius: 0px;
border-color: orangered;
opacity: 1;
}
75% {
transform: scale(5);
opacity: 0.75;
}
100% {
transform:rotateY(0deg) translateY(0px);
opacity: 0;
}
}
img {
border: 10px solid rgb(255, 196, 0);
border-radius: 50%;
animation: 동전뒤집기 3s ease-in-out infinite;
}
@keyframes 로딩중 {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
h1 {
font-weight: bold;
animation: 로딩중 3s ease-in infinite;
display: flex;
justify-content: center;
height: 100vh;
align-items:center;
}
</style>
</head>
<body>
<img src="img folder/coin.png" />
<h1>Loading...</h1>
</body>
</html>
- padding: 3px 5px; -> 3px을 위,아래 / 5px를 좌, 우에 준다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Css Transition</title>
<style>
a {
color: blue;
background-color: salmon;
text-decoration: none;
padding: 3px 5px;
border-radius: 5px;
font-size: 100px;
transition: background-color 10s ease-in-out,
color 3s ease-in-out ;
}
a:hover {
color: salmon;
background-color: blue;
}
</style>
</head>
<body>
<a href="#">Go homeee</a>
</body>
</html>
'Web > HTML, CSS' 카테고리의 다른 글
| [CSS] flexbox, pseudo element (0) | 2022.07.17 |
|---|---|
| [CSS] 단축키, BEM, 아이콘 추가, 폰트 변경 (0) | 2022.07.12 |
| [CSS] Combinators, Attribute, Colors and Variables (0) | 2022.07.11 |
| [CSS] fixed ~ pseudo selectors (0) | 2022.07.08 |
| [CSS] Inlines ~ Flexbox 복습 (0) | 2022.07.06 |