css animation 애니메이션 1 - 속성알아보기
페이지 정보
작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 19-07-15 16:53본문
css 로 애니메이션을 제작하려고 하면 일단 해당 속성값에 대해서 알아 볼 필요가 있다.
여러가지의 사이트를 참고해서 애니메이션의 속성값을 일부 정리해보았다.
[속성]
// 모질라(Mozilla) 홈페이지 참고
animation-delay
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
시간을 나타내는 속성입니다.
animation-delay : 250ms;
animation-delay : 2s;
animation-delay : -1s;
마이너스의 시간은 애니메이션 주기의 도중에 바로 시작합니다.
-1s 애니메이션 시퀸스 1초부터 시작을 합니다.
animation-duration
애니메이션의 한 사이클을 완료하는데 걸리는 시간 animation-delay 와 차이가 있다.
즉 전체 애니메이션의 시간을 지정
1s, 2s 등의 시간으로 사용한다.
animation-duration : 1s;
animation-direction
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
normal : 애니메이션은 사이클마다 정방향으로 재싱되는 기본값
reverse : 사이클마다 역방향으로 부터 시작됩니다.
alternate : 사이클 각 주기의 방향을 뒤집으며 , 첫번째 반복은 정방향으로 진행. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작
alternate-reverse : 애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
[예제]
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
animation-iteration-count
애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
animation-iteration-count : infinite // 무한반복
animation-iteration-count : 3 // 3번반복
animation-play-state
애니메이션을 멈추거나 다시 시작할 수 있습니다.
애니메이션이 중지했을때 중지했던 지점으로부터 다시 시작합니다.
animation-play-state : running
animation-play-state : paused
<script type="text/javascript">
$(document).ready(function(){
$(".animation-btn").click(function(){
$(".animated").css("animation-play-state", "running");
});
$(".stop-animation").click(function(){
$(".animated").css("animation-play-state", "paused");
});
});
</script>
animation-timing-function
중간 상태들의 전환을 어떤 시간 간격으로 진행 할지 지정 합니다.
[속성]
linear : 동일한 애니메이션 속도를 유지한다.
ease : 천천히 시작해서 중간에 빨라지고 끝날때 천천히 끝난다.
ease-in : 시작할때 천천히 시작한다.
ease-out :
ease-in-out : 끝날때 천천히 끝난다.
나머지 예제들 참고주소 :
https://www.w3schools.com/cssref/playit.asp?filename=playcss_animation-timing-function&preval=ease
animation-fill-mode
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
즉 실행전과 실행후와 어떤 스타일시트를 적용하는방법을 지정할 수 있습니다.
[속성]
none : 애니메이션이 끝나도 상태를 설정하지 않습니다.
forwards : 에니메이션이 100% 진행되었을때 마지막 키프레임을 유지 즉 애니메이션이 끝난후에 그지점에 있는경우
backwards : 애니메이션이 끝난후 시작점으로 지정
both : 애니메이션의 앞,뒤결과를 조합한다.
inherit : 애니메이션이 끝난후에 상위요소를 상속받습니다.
위와 같이 속성정리를 해봤지만 실제 테스트 코드를 보면서 확인하는것이 이해가 빠릅니다.
댓글목록
등록된 댓글이 없습니다.