< transition > : 시간을 이용해서 A>B 로 동작 가능하다.
1. transition-property : 무엇을 all; margin-right; color;
2. transition-duration : time시간 자료형 ( 2s; 500ms; ex,0.5s=500ms 같다.)
.box {
width: 300px;
height: 80px;
border: 2px dashed green;
font-size: 30px;
background-color: aqua;
color: white;
text-align: center;
transition-property: all;
transition-duration: 1s;
}
.box:hover {
background-color: indianred;
color: black;
font-size: 50px;
}
3. transition-delay : ~초 뒤에 변화시작 ! 요소가 여러개이면 도미노처럼 적용된다.
4. transition-timing-function : A > B 로 변할 때 중간 과정의 시간을 조절함. 빠르게 ? 천천히 ?
ㅡ ease; 기본값 , ease-in; 천천보통 , ease-iut; ,보통천천?, ease-in-out; 중간이 빠름, linear; 속도일정.
5. transition (shorthand) : 순서 중요함, 맨앞 property +시간은 앞쪽이 duration + 뒤쪽이 delay이다.
transition: all 3s ease-in 1s;
6. transition + transform 활용하기
.box {
width: 100px;
height: 100px;
border: 10px solid palevioletred;
border-radius: 30px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
transition: all 1s ease-in-out;
transform-origin: bottom right;
}
.box:hover {
transform: rotate(360deg) translatey(30px);
}
< anmaition > : 다수의 스타일을 자동으로 동작하게 한다.
1. @keyframes : 애니메이션의 세트를 미리 만들어야 한다.
ㅡ from-to 또는 %로 세분화 할 수 있다.
2. animation-name : @keyframes의 이름을 가지고 온다.
ㅡ 대소문자 구분, 숫자, _ , - 가능
3. animation-duration : time자료형 시간 , 한 사이클을 완료하는데 걸리는 시간. ( s , ms , 1s =1000ms ), 양수
.box {
width: 100px;
height: 100px;
border: 10px solid palevioletred;
border-radius: 30px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
}
.box:hover {
animation: back-color 5s infinite alternate;
}
@keyframes move {
frome {
width: 100px;
}
to {
width: 300px;
}
}
@keyframes remote {
0% {
}
50% {
width: 300px;
}
100% {
}
}
@keyframes first-ani {
50% {
width: 300px;
}
}
@keyframes back-color{
0% {
background-color: rgb(19, 12, 4);
}
10% {
background-color: pink;
}
30% {
background-color: aqua;
}
60% {
background-color: blueviolet;
}
}
4. animation-delay: 음수가능 (즉시 시작되지만 애니메이션 주기의 도중에 시작된다. )
5. animation-timing-function : 애니메이션 중간 과정의 시간을 조절함. 빠르게 ? 천천히 ?
ㅡ ease; 기본값 , ease-in; 천천보통 , ease-iut; ,보통천천?, ease-in-out; 중간이 빠름, linear; 속도일정.
6. animation-iteration-count : 반복횟수를 조정한다. number , linear 1번 , infinite 무한
7. animation-direction : 거꾸로 재생
ㅡ normal , reverse 거꾸로 ,alternate 앞뒤앞뒤 , alternate-reverse 뒤앞뒤앞
div {
width: 100px;
height: 100px;
border: 10px solid palevioletred;
border-radius: 30px;
background-color: lightskyblue;
text-align: center;
line-height: 100px;
}
.box {
animation-name: rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: 2;
animation-direction: alternate;
}
@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
8. animation-play-state : paused; 일시정지, running 기본값 / 이 두가지로 조정가능.
9. animation-fill-mode : 실행 전과 후에 대상에 스타일을 적용할 방법
ㅡ none; 애니메이션 실행되지않으면 기본 설정 스타일로 시작됨.
ㅡ forwards : 끝난 모습의 키프레임 유지
ㅡ backwards : 미리 키프레임으로 준비해라
ㅡ both : 시작 과 끝을 다 키프레임으로 한다.
10. animation (shorthand) : name duration timing-function delay iteration-count direction fill-mode play-state
