transition은 A에서 B로만
animation은 다수의 스타일을 전환하는 애니메이션
@keyframes
개발자가 애니메이션 중간중간 특정 지점들을 거칠 수 있는 키프레임들을 설정함
<div class="box">
하윙!
</div>
.box {
width:100px;
height: 100px;
border: 10px solid seagreen;
background-color: rgb(204,253,225);
border-radius: 30px;
animation: my-first-animation 2s infinite alternate;
}
@keyframes my-first-animation{
from {width: 100px;}
to {width: 300px;}
}
@keyframes my-first-animation{
0% {}
50% {width:300px;}
100%{}
}
동일하게 %로 표현 (0%, 100%는 생략해도 가능)
@keyframes my-first-animation{
0% {
font-size: 20px;
}
50% {
width:300px;
font-size: 80px;
}
100%{
font-size: 20px;
}
}
글씨 크기 변화도 줄 수 있음
.box:hover {
animation: my-first-animation 2s infinite;
}
hover 효과도 넣을 수 있음
animation-name
영어a~z, 숫자 0~9, 대소문자 구분하고 -,_만 가능
animation-duration
애니메이션이 한 사이클을 완료하는데 걸리는 시간을 지정
s와 ms 단위 사용
음수 값은 유효하지 x
animation-delay
애니메이션 시작할 시점을 지정 (앞에 지연시간을 설정)
s, ms 단위 사용
애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋
음수값 지정 가능- 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작된다. 만약 -2s면 시작은 바로 하지만 2초부터 시작된것처럼 재생
animation-timing-function
<div class="box1">ㅎ</div>
<div class="box2">ㅎ</div>
<div class="box3">ㅎ</div>
div {
width:100px;
height: 100px;
border: 10px solid black;
border-radius: 30px;
}
.box1{
background-color: rgb(204,253,225);
animation: my-first-animation 1s infinite;
animation-delay: -0.3s;
}
.box2{
background-color: rgb(201, 39, 187);
animation: my-first-animation 1s infinite;
animation-delay: 0.3s;
}
.box3{
background-color: rgb(80, 55, 190);
animation: my-first-animation 1s infinite;
animation-delay: 0.6s;
}
@keyframes my-first-animation{
0% {
font-size: 20px;
}
50% {
width:300px;
font-size: 80px;
}
100%{
font-size: 20px;
}
}
infinite - 무한반복
animation-iteration-count
반복횟수를 제한할 수 있음
infinite 값을 주면 무제한반복, 빼게 되면 1번만 하고 끝
0.5값을 주면 반만 하고 끝
animation-direction
애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정
reverse 거꾸로
alternate 앞으로갔다가 뒤로갔다가 앞으로갔다가..
alternate-reverse 뒤로갔다가 앞으로 갔다가 뒤로갔다가...
<div class="box1">ㅎ</div>
div {
width:100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: aquamarine;
}
.box1{
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-direction:alternate-reverse
}
@keyframes rotate {
from{
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
animation-play-state
기본값: animation-play-state: running
<div class="box1">ㅎ</div>
div {
width:100px;
height: 100px;
border: 10px solid silver;
border-radius: 50%;
background-color: aquamarine;
}
.box1{
animation-name: rotate;
animation-duration: 3s;
animation-timing-function: linear;
animation-direction:alternate-reverse;
animation-play-state:paused;
}
.box1:hover {
animation-play-state: running;
}
@keyframes rotate {
from{
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
가만히 있다가 마우스를 대면 돌아감
animation-fill-mode
애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정
forwards : 끝난모습의 keyframs를 유지해라
backwards :시작하기전 delay 일때 0% 또는 from의 값들을 미리 적용 하고 있어라
both: forwars와 backwards를 함께
1.기존스타일
2. keyframe 첫번째 -------backwards 시작
3. ~~ing
4. keyframe 마지막 -------forwards 끝
5. 기존스타일
<div class="box1">
안녕하세요
</div>
div {
width:100px;
height: 100px;
border: 10px solid green;
}
.box1 {
background-color: rgb(245, 255, 229);
animation: fill-mode 3s linear 1s;
animation-fill-mode: forwards;
}
@keyfranes fill-mode {
0% {
background-color:red;
}
50% {
width: 200px;
}
100% {
background-color: black;
}
}
animation (shorthadn)
animation: 3s ease-in 1s infinite reverse both running slidein;
duration - timefunction - delay - interation count - direction - fill mode - state- name
name과 duration 은 꼭 포함되어야 함!