아주 쉬운 CSS - Animation

Animation에 대해 알아보자!

Animation

Animation의 속성 종류

name
duration
timing-function
delay
iteration-count
direction

---

name

사용할 aniamtion의 이름을 지정한다.

<style> 
  .animation{ 
    animation-name: change; 
  } 
  @keyframes chage{ 
    from{width:10px;} 
    to{width:30px;} 
  } 
</style>

• @ keyframes 뒤에 animation의 이름을 붙여 해당 animation을 재생할 수 있다.
• @keyframes 규칙을 준수해야 하며 none으로 작성 시 animation이 재생되지 않는다. 

 

duration

animation을 한 번 재생하는데 걸리는 시간, 몇 초 동안 동작할지 지정

<style>
.animation{
  animation-duration: 3s;
}
</style>

 

timing-function

전환 시간 간격 설정

<style>
  .animation{
    animation-timing-function: linear;
  }
</style>

 

delay

페이지 로드 후 animation 시작 딜레이

<style>
.animation{
  animation-delay: 1s
}
</style>

 

 

iteration-count

animation 반복 횟수

<style>
.animation{
   animation-iteration-count: 6
}
</style>

 

direction

animation 진행 방향

<style>
.animation{
  animation-direction: alternate;
}
</style>

 

• alternate: form->to->from
• normal: from->to, from->to
• reverse:to->from, to->from

---

tranform & animation

.box1{
    animation: rotation 1000ms infinite alternate;
}

@keyframes rotation{
    from{transform:rotate(-50deg);}
    to{transform:rotate(50deg);}
}

 

만약 prefix 작성 시, -webkit-을 @keyframes 안에 작성

 

.box1{
    animation: rotation 1000ms infinite alternate;
}

@-webkit-keyframes rotation{
    from{-webkit-transform:rotate(-50deg);}
    to{-webkit-transform:rotate(50deg);}
}

---

css에서 구현하는 경우

#main article{
    transition-property: color;    
    animation-duration: 5s;
}
#main article:hover{
    color: pink;
}