animation
CSS스타일을 전환하면서 동적인 효과를 만들 수 있는 속성이다.
@keyframes
어떤 모양에서 어떤 모양으로 바꿀지 정한다.
@keyframes name {
from { ... }
n% { ... }
to { ... }
}
name : 애니메이션의 이름
0% (from) : 시작할 때의 모양을 정한다.
n% : n%일 때의 모양을 정합니다.
100% (to) : 끝날 때의 모양을 정한다.
animation-name
어떤 @keyframes을 사용할지 지정한다. (@keyframes 속성에서 설정한 애니메이션의 이름)
animation-duration
애니메이션의 지속시간을 지정한다.
시간 단위는 초(s) 또는 1/1000초(ms)를 사용하고, 기본값은 0s이다.
animation-timing-function
애니메이션 진행 속도 지정 (시간함수)
linear : 등속 / 처음부터 끝까지 일정한 속도로 진행된다.
ease : 점진적인 가속 / 기본값 / 천천히 시작되어, 빨라지고, 다시 느려진다.
ease-in : 가속 / 천천히 시작되어 빠르게 끝난다.
ease-out : 감속 / 빠르게 시작되어 천천히 끝난다.
ease-in-out : 점직적인 가속 후에 감속 / 천천히 시작되어, 빨라지다가 천천히 끝난다.
cubic-bezier(n,n,n,n) : 사용자가 정의한 cubic-bezier 함수에 따라 진행된다.
animation-delay
애니메이션을 시작 지연 지정한다.
duration 속성처럼 ms 또는 s 단위로 시간 단위를 설정한다.
기본값은 0s으로 즉시 애니메이션 효과가 시작되고 time 값에 양수를 입력하면 해당 시간이 경과한 후에 시작한다.
animation-iteration-count
애니메이션 반복 횟수 지정, 몇번 반복할지 입력해준다.
infinite : 영구적으로 반복
animation-direction
애니메이션 진행 방향
normal : 기본값 / 정해진 순서로 진행 (순방향) / 재생이 끝나면 첫번째 프레임부터 다시 순방향 진행한다.
reverse : 반대 순서로 진행 (역방향) / 재생이 끝나면 마지막 프레임부터 다시 역방향 진행한다.
alternate : 정해진 순서로 진행했다가 반대 순서로 진행 (순방향 시작 -> 역방향과 순방향이 번갈아 진행)
alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행 (역방향 시작 -> 번갈아 진행)
animation-fill-mode
애니메이션 시작하기 전과 끝난 후(애니메이션이 진행되지 않을 때) 의 모양을 지정한다.
animation-play-state
애니메이션을 진행할지 멈출지 지정
running : 기본값 / 애니메이션을 진행한다.
paused : 애니메이션을 진행하지 않는다.
.box{
width: 200px;
height: 200px;
background-color: blueviolet;
animation-name: ani1;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes ani1{
from{
border-radius: 0px;
}
to{
border-radius: 100px;
background-color: coral;
}
}
ani1이라는 이름의 애니메이션을 지정해서, box클래스에 적용시켰다.
'WEB > CSS' 카테고리의 다른 글
nth-child(n) / nth-of-type(n) (0) | 2022.08.02 |
---|---|
@media - 미디어 쿼리 (0) | 2022.06.09 |
transform - 요소 형태 변형(회전, 확대, 축소, 비틀기 등) (0) | 2022.06.08 |
transition - CSS 속성을 천천히 변화 시키기 (0) | 2022.06.08 |
레이아웃 CSS - flex (1) | 2022.06.08 |