[HTML/CSS] 브라우저, 반응형웹

🦋 CSS 애니메이션

• css애니메이션중 @keyframes키워드를 사용해보자
• 키프레임 쓰려면 우선 CSS로 키프레임 블록을 만들어야 함

/* '%' 단위로 시간 진행에 따른 상태를 작성해주면 됩니다. */

@keyframes 애니메이션이름 {
	0% {            /* from 이라고 작성해도 됩니다.*/
		CSS속성 : 속성값; 
	}

	50% {           /* 애니메이션 진행도에 따른 스타일을 설정합니다. */
                  /* 필요하다면 1부터 99까지도, 소수점까지도 모두 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}

	100% {          /* to 라고 작성해도 됩니다.*/
		CSS속성 : 속성값;
	}
}

• 예) 회전애니메이션 키프레임 블록

@keyframes lotate {
	0% {
		transform : rotate(0deg)
	}

	50% {
		transform : rotate(180deg)
	}

	100% {
		transform : rotate(360deg)
	}
}

/* 시작 시점에선 0도, 50% 시점에선 180도, 완료 시점에선 360도 회전시키는 애니메이션입니다. */

🦋 애니메이션 속성

• animation : 띄어쓰기로 쭉 나열하면 아래의 속성들을 한번에 지정할 수 있음
  • animation-name : 애니메이션의 중간상태를 지정하는 이름, @keyframes블록에 작성
  • animation-duration : 한 사이클의 애니메이션이 재생될 시간 지정
  • 이하 animation생략
  • delay : 애니메이션의 시작을 지연시킬 시간 지정
  • direction : 애니메이션 재생 방향을 지정
  • iteration-count : 애니메이션 몇번 반복될지 지정
  • play-state : 애니메이션을 재생,정지,재생시킬수있음
  • timing-function : 중간상태들의 전환을 어떤 시간 간격으로 진행할지 지정