CSS Animations > 그누보드가이드

본문 바로가기
사이트 내 전체검색

그누보드가이드

css CSS Animations

페이지 정보

작성자 관리자 댓글 0건 조회 541회 작성일 18-03-06 03:44

본문

# CSS Animation: element를 스타일을 점차적으로 변화시키는 것으로 에니메이션을 적용하기 위해서는 keyframe을

적용해야한다.

키프레임은 특정시간에 어떤스타일을 가지게 해준다.


<!DOCTYPE html>

<html>

<head>

<style> 

div {

    width: 100px;

    height: 100px;

    background: red;

    position:relative;


    /* Safari 4.0 - 8.0 */

    -webkit-animation-name: example;

    -webkit-animation-duration: 5s;

    -webkit-animation-timing-function: linear;

    -webkit-animation-delay: 2s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-direction: alternate;


  /* Standard syntax */

   animation-name: example;

   animation-duration: 5s; //에니메이션이 완료되는데 걸리는 시간

   animation-timing-function: ease-in-out; //에니메이션이 진행되는 시간 curve이다. default값은 ease.

   animation-delay: 2s; //에니메이션이 몇초후에 시작하는가이다. 

   음수도 가능한데 음수를 입력하면 어느정도 에니메이션이 진행된상태에서 시작한다.

   animation-iteration-count: 3; //에니메이션이 몇회 반복하는 가이다. infinite:무한반복

   animation-direction: alternate; //에니메이션이 정방향,역방향으로 하는가이다. default값은 nomal:정방향(forwards).

   

}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {

    0%   {background-color:red; left:0px; top:0px;}

    25%  {background-color:yellow; left:200px; top:0px;}

    50%  {background-color:blue; left:200px; top:200px;}

    75%  {background-color:green; left:0px; top:200px;}

    100% {background-color:red; left:0px; top:0px;}

}


/* Standard syntax */

@keyframes example {

   0%{background-color:red;left:0px;top:0px;}

   25%{background-color:yellow;left:200px; top:0px;}

   50%{background-color:blue;left:200px; top:200px;}

   75%{background-color:green;left:0px;top:200px;}

   100%{background-color:red;left:0px;top:0px;}

 }


</style>

</head>

<body>

<h1>Css Animation</h1>


<div></div>


</body>

</html>


* 에니메이션 단축형

div {

    animation-name: example;

    animation-duration: 5s;

    animation-timing-function: linear;

    animation-delay: 2s;

    animation-iteration-count: infinite;

    animation-direction: alternate;

은 아래처럼 간단히 표현 할수있다.

div {

    animation: example 5s linear 2s infinite alternate;

}


# CSS Animation Properties: 에니메이션을 <div>에 붙인다.

div {

    animation: mymove 5s infinite;

}


# CSS Syntax

animation: name duration timing-function delay iteration-count direction fill-mode play-state;


* animation-name: <div>에 적용하려는 keyframe에니메이션이름이다.

* animation-duration: 에니메이션이 완료되는데 걸리는 시간이다.

* anitmation-timing-function: Specifies the speed curve of the animation

* animation-delay: 에니메이션이 시작되기전에 걸리는 시간이다.

* animation-iteration-count: 에니메이션이 몇회 반복하는가이다.

* animation-fill-mode: Specifies what values are applied by the animation outside the time it is executing

* animation-play-state: Specifies whether the animation is running or paused

* intial: Sets this property to its default value.

* inherit: Inherits this property from its parent element




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

댓글목록

등록된 댓글이 없습니다.

회원로그인

설문조사

그누보드5로 홈페이지제작이 좋다

접속자집계

오늘
106
어제
104
최대
257
전체
23,201

현재시간


그누보드5
Copyright © 소유하신 도메인. All rights reserved.