움직이는 웹사이트 제작(Transition, Animation)

Transition

property, duration

• property: 효과를 적용하고자 하는 CSS 속성
• duration: 효과가 나타나는데 걸리는 시간

timing-function, delay

• timing-function: 효과의 속도, linear은 '일정하게'라는 의미
• delay: 특정 조건 하에서 효과 발동, 1s는 '1초 후'라는 의미

가상 선택자: hover

• css에서 미리 만들어 놓은 클래스, '마우스를 올렸을 때'라는 조건

예시

<style>
	.transition{
    	transition: width 2s linear 1s;
    }
    
    .transition:hover { width: 300px; }
</style>

=> 마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 속도 일정하게 변하는 애니메이션 효과 발동

❉ 먼저 나오는 숫자가 duration이고 숫자 하나만 있을때도 duration임

 

Animaition

Animation

• iteration-count: 애니메이션 반복 횟수
• direction: 애니메이션 진행 방향
  • alternate: from -> to -> from
  • normal: from -> to, from -> to
  • reverse: to -> from, to -> from