Animation

animate 효과는 왼쪽처럼 지속적인 효과를 줄때 사용한다.

<img src="이미지경로" alt="" class="ex1" />
움직일 요소를 지정한다.

.ex1{
    animation-name: animate_ex1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes animate_ex1{
    0% {transform:translate(0, 0);}
    50% {transform:translate(0, 50px);}
    100% {transform:translate(0, 0);}
}

@keyframes 효과명{시간대별효과} 이와 같이 요소의 움직임을 시간대별로 먼저 선언한다. (선언한 움직임을 animation-duration로 지정한 시간동한 실행)
시간은 0%, 10% ~ 100% 와 같이 퍼센트로 표기하여 배분한다.
예를 들어 네모로 한바퀴 돈다면 0%에는 왼쪽 상단, 25%에는 오른쪽 상단, 50%에는 오른쪽 하단, 75%는 왼쪽 하단, 100%에는 왼쪽 상단 으로 선언하여 한바퀴 도는 것으로 한다.

요소의 크기 및 위치 등등 css로 변경 가능한 것은 거의 애니메이션을 줄 수 있다.

• 투명도 - opacity:0;
• 위치이동 - transform:translate(0, 50px); //첫번째가 좌우, 다음이 위아래
• 축소 확대 - transform: scale3d(1.2, 1.2, 1); //첫번째가 좌우, 다음이 위아래

애니메이션을 요소에 적용하는 값

선택자{animation-name: 효과명; animation-duration: 애니메이션 실행시간; animation-iteration-count: 반복횟수;}

animation-name

효과의 이름

animation-duration

효과가 실행되는 초 (animation-duration:1.5s)

animation-iteration-count

반복 횟수 (숫자로 입력, infinite - 무한반복)

animation-delay

효과가 시작하기 전 대기 시간 (animation-delay:1s;)

animation-timing-function

가속도 (linear:가속도 없음, ease:가속도, ease-in:점점빠르게, ease-out:점점느리게) - 애니메이션은 기본적으로 가속도가 들어가 있음
cubic-bezier(n,n,n,n) 가속도 조절하기 cubic-bezier 값 구하기

animation-fill-mode

animation-fill-mode:forwards; 효과가 끝난 후에도 마지막 상태 유지