작성일/수정일
2023-11-28 17:48:13 / 2023-11-28 17:48:13
** 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