구글 이스터 에그, keyframes, animation

구글 이스터 에그
/* 기울기 처리 + 회전 */
body {
  transform: rotate(1deg); // 1도 회전
  animation-name: roll; // roll이라는 이름의 애니메이션을 설정한다.
  animation-duration: 4s; // 애니메이션 동작시간
  animation-iteration-count: 1; // 애니메이션 반복 횟수
}

@keyframes roll { // 애니메이션의 시작부터 종료 부분까지 어떠한 동작을 할 것인지 지정
  // 100%는 종료부분(to로 지정가능) - 0%는 시작부분(from로 지정가능)
  100% {
      transform: rotate(360deg)
  }
}

/* 깜빡임 처리 */
@keyframes blink {
  80% {
  	opacity: 0.0
  }
}

span {
	animation: blink 1s steps(1, end) 0s infinite
}