animation - CSS 스타일을 다른 CSS 스타일로 부드럽게 전환

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클래스에 적용시켰다.