[CSS] - animation

css로 애니메이션 넣기

@keyframe

• @keyframe : 애니메이션 스테이지를 정함
  • 애니메이션의 이름을 정함 (ex)loading)
  • 스테이지 : 0% ~ 100%
  • css 스타일 : 각 스테이지에 적용시킬 속성

    @keyframes tutsFade {
      0% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

  • from to로 적어도 되나보다!

    @keyframes tutsFade {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }

animation 속성

• animation :

  • animation-name: @keyframes 이름 (예시에서는 tutsFade를 사용함)

  • animation-duration: 타임프레임 길이. 애니메이션 시작부터 마지막까지 총 지속시간

  • animation-delay: 애니메이션이 시작하기 전 지연시간

  • animation-iteration-count: 반복 횟수

  • animation-timing-function: 애니메이션 속도 조절 ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).

  • animation-direction: 루프 (loop) 방향. 정방향으로 반복, 역방향으로 반복, 번갈아가며 반복 등을 설정

    .element {
      animation: tutsFade 4s 1s infinite linear alternate;
    }

예시 ) 로딩

• html 태그 - 점 하나가 span ( 점 세개 )

   <div class="loading">
           <span></span>
           <span></span>
           <span></span>
   </div>

• span 하나하나 애니메이션을 넣는다 loading이라는 keyframe 생성

   .loading span {
       display: inline-block;
       width: 15px;
       height: 15px;
       background-color: gray;
       border-radius: 50%;
       animation: loading 1s linear infinite;
   }

• 0%, 100% 일때에는 크기를 작고 보이지 않게 , 50%일때에는 크기를 좀 크게

   @keyframes loading {
  
       0%,
       100% {
           opacity: 0;
           /*  크기가 작아진 상태  */
           transform: scale(0.5);
       }
  
       50% {
           opacity: 1;
           transform: scale(1.1);
       }
   }

• 하나하나 색깔을 다르게 넣어주고, 애니메이션 딜레이를 주어 각자 다르게 커졌다 작아졌다 진행하도록 한다.

  .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: yellowgreen;
  }

100% 구간에 갔을때에 멈추길 바랄때

• 원래 animation은 0% 에서 100%의 애니메이션 실행 후, 0%로 다시 도달한다.
  그러다보니 애니메이션이 어색해질 때가 있다.

 animation-fill-mode: both;

• 이 속성을 주면 100% 구간에서 멈추어 자연스러운 애니메이션을 나타낼 수 있다.