[3주차] CSS 키프레임 애니메이션과 가상클래스 hover

💡keyframes

The @keyframes rule specifies the animation code.

@keyframes loading {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

💡원형 크기 변경 로딩 애니메이션

.loading span {
  display: inline-block; //block 요소인 span을 크기가 변하게 바꿈
  width: 15px;
  height: 15px;
  background-color: gray;
  border-radius: 50%;
  animation: loading 1s linear infinite; //@keyframes 적용
}
.loading span:nth-child(1) {
  animation-delay: 0s;
  background-color: crimson;
}
.loading span:nth-child(2) {
  animation-delay: 0.2s;
  background-color: dodgerblue;
}
.loading span:nth-child(3) {
  animation-delay: 0.4s;
  background-color: royalblue;
}

💡position - relative와 absolute

부모 요소는 relative position을, 자식 요소는 absolute position을 설정해야함. 그래야 자식 요소가 부모 요소를 바탕으로 인식하지 않음.

.loading {
  /*border: 1px solid red;*/
  width: 30px;
  height: 30px;
  position: relative;//부모 요소
}
.loading span {
  position: absolute;//자식 요소
  width: 10px;
  height: 10px;
  background-color: gray;
  top: 0;
  left: 0;
  animation: loading 1.5s infinite;
}

💡사각형 안에 들어오게 하는 법

left : calc(100% - ?px)

사각형에서 left : 100%는 왼쪽 모서리 기준으로 이동하게 됨. 따라서 사각형의 가로길이만큼 제외해줘야 함.

💡keyframes에서 호환성

처음부터 끝까지 요소를 동일하게 맞춰야 함.

@keyframes loading {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    /*right: 0;*/ //오류
    left: calc(100% - 10px);
    background-color: dodgerblue;
  }
  50% {
    /*bottom: 0;*/ //오류
    top: calc(100% - 10px);
    left: calc(100% - 10px);
    background-color: orange;
  }
  75% {
    top: calc(100% - 10px);
    left: 0;
    background-color: yellowgreen;
  }
  100% {
    top: 0;
    left: 0;
  }

💡사각형 임의로 찌그러뜨리기

슬래시 이용함.

.square span {
  position: absolute;
  width: inherit;
  height: inherit;
  border: 1px solid #fff;
  border-radius: 40% 60% 65% 35% / 40% 45% 55% 60%;//사각형 찌그러뜨림.
  transition: 0.5s;
}

💡애니메이션 역방향 설정

reverse 설정하면 됨

.square span:nth-child(2) {
  animation: circle 4s linear infinite;
  animation-direction: reverse;
}

💡:hover 뒤에 요소가 붙을 경우

:hover 뒤에 요소가 붙을 경우 명령의 대상이 됨.

.icon:hover span {//span에 hover 적용
  /*display: block;*/
  opacity: 1;
  visibility: visible;
}

💡hover로 사라졌다가 보이게 하기

.icon:hover span {
  /*display: block;*/
  opacity: 1;
  visibility: visible;
}

💡속성 이어쓰기

속성을 이어쓰지 않으면 밑에 쓴 속성이 위의 것을 덮어쓰게 됨.

.app-ui {
  /*border: 1px solid red;*/
  width: 340px;
  height: 640px;
  transform: rotate(-30deg) skewX(20deg) scale(0.7);//속성을 이어씀.
  position: relative;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: 0.5s;
  background-color: #ddd;
}

💡hover와 nth-child

hover가 실행될 때, nth-child마다 다르게 실행시킬 수 있음.

.app-ui:hover img:nth-child(1) {
  transform: translate(40px, -40px);
  opacity: 0.2;
}
.app-ui:hover img:nth-child(2) {
  transform: translate(80px, -80px);
  opacity: 0.4;
}
.app-ui:hover img:nth-child(3) {
  transform: translate(120px, -120px);
  opacity: 0.6;
}
.app-ui:hover img:nth-child(4) {
  transform: translate(160px, -160px);
}