에티테마

css animation 애니메이션 1 - 속성알아보기

페이지 정보

작성자 소프트존 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 댓글 0건 작성일 19-07-15 16:53

본문

3ad3c6f8e42f7d7b12ca959388e561ed_1563177255_65.png


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 : 애니메이션이 끝난후에 상위요소를 상속받습니다.

위와 같이 속성정리를 해봤지만 실제 테스트 코드를 보면서 확인하는것이 이해가 빠릅니다.

 





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기

댓글목록

등록된 댓글이 없습니다.