Dev log - 11, animation 실습 #1

animation 속성

• transition 속성 보다 더 다양하게 표현 가능한 애니메이션 속성
  참고 사이트 (https://www.w3schools.com/css/css3_animations.asp)

• @keyframes 이름 으로 활용 (animation-name 속성으로 이름을 정함)

• 기본 형식

@keyframes rotate {
from(=0% 의미) {
	background: red;
	}
to(=100% 의미){
    background: blue;
	}
}

• 세부적인 형식 (from 과 to 혼용 가능)

@keyframes rotate {
	0% {
	background: red;
	}
	50% {
    background: yellow;
	}
	100% {
    background: blue;
	}
}

• animation-fill-mode 속성

1. none : 기본값, 애니메이션 실행 전-후 스타일을 적용 안함
2. forwards : 실행 후, 마지막 키프레임에 의해 설정된 스타일 값을 유지
3. backwards : 실행 전, 첫 번째 키프레임에 의해 설정된 스타일 값을 유지, 실행 후, 초기값으로 돌아옴
4. both : 첫번째 프레임 상태를 유지하다가 애니메이션이 진행되고 마지막 프레임에서 정지

• 바닥에 튕기는 모양을 만들 때

.bouncingball {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 100%;
  margin: 50px;
  background: violet;
  animation-name: bounce;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes bounce {
  0% {
    top: 0;
    animation-timing-function: ease-in;
  }
  50% {
    top: 140px;
    animation-timing-function: ease-out;
  }
  55% {
    top: 160px;
    height: 120px;
    animation-timing-function: ease-in;
  }
  65% {
    top: 120px;
    height: 140px;
    animation-timing-function: ease-out;
  }
  100% {
    top: 0;
    animation-timing-function: ease-in;
  }
}

• 가상 선택자에 transform: scale(x,y) 속성을 이용하여, 홈이 파여져 있는 형태를 만들 수 있음.