** SD_10_Animation
CSS3 에니메이션은 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환해 줍니다.
Animation의 중간 상태를 나타내는 Keyframes 으로 구성되어 있다.
animation 속성도 transition 과 유사하게 단일속성과 축약형으로 작성할 수 있습니다.

https://www.relation.co.kr/images_board/board_system_publishing/255/index.php
https://www.relation.co.kr/images_board/board_system_publishing/255/index2.php
https://www.relation.co.kr/images_board/board_system_publishing/255/index3.php

https://www.relation.co.kr/images_board/board_system_publishing/61/index.html




** animation 축약형
- 이름 > 실행속도 > 지연시간 > 반복횟수 > 애니메이션 속도 조절/그래프 >  반복방향설정 > 끝난후위치 > 실행or정지
- animation: animation-name, animation-duration, animation-delay, animation-iteration-count, animation-timing-function, animation-direction, fill-mode, play-state;
- animation: fadeIn 4s 1s infinite linear alternate;
- animation : _rotate 1s linear 1s infinite;
 

animation: 
            animation-name   @keyframs{}
            animation-duration, (2s)
            animaton-delay, (2s)
            animation-iteration-count, (infinite, inherit)
            animation-timing-function, (linear, ease, ease-in, ease-in-out)
            animation-direction, (normal, reverse, alternate, alternate-revers)
            animation-fill-mode, (none, forwards, backwards, both)
            animation-play-state (paused, running)

 

<style>
.mouse_wrap .mouse_area:after { content:""; position:absolute; left:50%; top:50%; width:4px; height:4px; background:#000; border-radius:3px; transform:translate(-50%,0); animation: mouse_after 0.5s 0.5s infinite ease-in normal;}

 @keyframes mouse_after{
    0% { opacity:1; }
    100%  { left:50%; top:80%; opacity:0; }
 }
</style>

** animation 
animation-name : 애니메이션의 중간 상태를 지정하기 위한 이름을 정의, 중간 상태를 정의 할 수 있는 @keyfram 으로 구성
animation-duration : 한 싸이클의 애니메이션이 얼마나 걸쳐 일어날지 지정합니다.
animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
animation-iteration-count : 반복횟수
animation-timing-function : transition 효과의 시간당 속도를 설정하여, 진행되는 방식을 정의한다.
- ease : 기본값으로, 중간으로 갈수록 속도가 증가하고 끝에서 다시 느려진다.
- linear : 동일한 속도로 진행된다.
- ease-in : 천천히 시작되며 끝날때까지 속도가 점차 증가된다.
- ease-out : 빠르게 시작되며 끝날때까지 속도가 점차 감소된다.
- ease-in-out : 천천히 시작되고 빨라진 다음 다시 느려진다. 
- cubic-bezier(n,n,n,n) : 한국말로 직역하면 3차원 베지어 곡선이라는 말이다.
animation-dirction : 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지  지정
animation-fill-mode : 애니메이션이 시작되기 전이나 끝나고 난 뒤 어떤 값이 적용될지 정의
animation-play-state : 애니메이션이 실행중에 중이 되었을때 계속 진행하거나 멈추게 할 것인지를 지정.






출처
https://webclub.tistory.com/621