간단한 css 애니메이션 구현하기

 

 

css로 표현할 수 있는 애니메이션으로 transition 애니메이션이 있다. (key frame 애니메이션은 다루지 않을 예정)

 

transition

transition-property	효과를 적용할 css속성 지정	transition-property: background-color, margin-left;
transition-duration	효과를 적용할 시간 지정	transition-duration:100ms;
transition-delay	효과가 발생하기까지의 시간 지정	transition-delay:0ms;
transition-timing-function	변화 방식 지정(fade in fade out같은)	transition-timing-function: ease-in;

 

input[type="submit"]:hover{
  background-color: #c7887f;
  margin-left: 20px;
  transition-property: background-color,margin-left;
  transition-duration: 300ms;
  transition-timing-function: ease-in;
  transition-delay: 0ms;
}

배경색이 바뀌고 오른쪽으로 20px만큼 움직이며 0.3초동안 시작할때는 천천히, 종료할때는 빨리 동작함. 지연 시간 없음