10. Animation

Animation  Syntax

easings.net

CSSAnimations

CSS Sprite Sheet Animations with steps()

animation

@keyframes  모션이름{

0%{모션 시작점의 css 설정}
100%{모션 끝점의  css  설정}
}

animation:모션이름 시간   가속도  지연시간  반복횟수  방향지정;

  • animation-name[모션이름]
  • animation-duration[시간]
  • animation-timing-function[가속도linear/ease]
  • animation-delay[지연시간]
  • animation-iteration-count[반복횟수infinite]
  • animation-direction[방향지정normal/alternate]

div {
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}

@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}

animateyourhtml5.appspot.com

laycss12

답글 남기기