CSS의 이미지 애니메이션

안녕하세요 여러분 오늘은 CSS로 이미지 애니메이션을 보여드리겠습니다.

시작하자...
주제로 들어가기 전에 먼저 이 점을 이해하십시오.

CSS에서 var는 무엇입니까?

var() 함수는 CSS 변수의 값을 삽입하는 데 사용됩니다.
요소에 "--j:1"과 같은 값을 제공하면 요소에 값이 "1"인 "i"라는 변수가 있음을 의미합니다.
var() 함수를 사용하여 이 변수에 액세스할 수 있습니다.

HTML -

 <div class="bodyContainer">
      <div class="imageContainer">
        <img style="--j:1.2;" class="imageAnimation" src="./croppedImages/image_part_001.jpg" />
        <img style="--j:1.4;" class="imageAnimation" src="./croppedImages/image_part_002.jpg" />
        <img style="--j:1.6;" class="imageAnimation" src="./croppedImages/image_part_003.jpg" />
        <img style="--j:1.8;" class="imageAnimation" src="./croppedImages/image_part_004.jpg" />
        <img style="--j:2;" class="imageAnimation" src="./croppedImages/image_part_005.jpg" />
        <img style="--j:2.2;" class="imageAnimation" src="./croppedImages/image_part_006.jpg" />
        <img style="--j:2.4;" class="imageAnimation" src="./croppedImages/image_part_007.jpg" />
        <img style="--j:2.6;" class="imageAnimation" src="./croppedImages/image_part_008.jpg" />
        <img style="--j:2.8;" class="imageAnimation" src="./croppedImages/image_part_009.jpg" />
      </div>
    </div>

이미지 섹션을 중앙 집중화할 본문 컨테이너를 만들었습니다

.

이 애니메이션에 대해 9개의 이미지가 있으므로 imageContainer는 3x3 그리드의 컨테이너를 생성합니다.

이 9개의 이미지는 1개의 단일 이미지에서 잘린 부분입니다.

CSS

.bodyContainer {
        display: grid;
        height: 80vh;
        place-content: center;
        animation-name: heightZero;
        animation-duration: 4.5s;
      }

      .imageContainer {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

     /* <!-- Setting the animation, duration, fill mode and timing function for the images. --> */
      img {
        width: 300px;
        height: 200px;
        animation-duration: calc(var(--j)*1s);
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
      }

      img:nth-child(1) {
        animation-name: slideLeft;
        border-top-left-radius: 10px
      }
      img:nth-child(2) {
        animation-name: slideTop;
      }
      img:nth-child(3) {
        animation-name: slideRight;
        border-top-right-radius: 10px;
      }
      img:nth-child(4) {
        animation-name: slideLeft;
      } 
      img:nth-child(5) {
        animation-name: slideTop;
      } 
      img:nth-child(6) {
        animation-name: slideRight;
      }
      img:nth-child(7) {
        animation-name: slideLeft;
        border-bottom-left-radius: 10px;
      }
      img:nth-child(8) {
        animation-name: slideBottom;
      }
      img:nth-child(9) {
        animation-name: slideRight;
        border-bottom-right-radius: 10px;
      }


      @keyframes slideLeft {
        0% {
          opacity: 0;
          transform: translateX(-100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }
      @keyframes slideRight {
        0% {
          opacity: 0;
          transform: translateX(100px);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes slideTop {
        0% {
          opacity: 0;
          transform: translateY(-100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes slideBottom {
        0% {
          opacity: 0;
          transform: translateY(100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

css 부분은 매우 간단합니다. 본문 컨테이너 그리드를 만들고 place-content-center를 사용하여 imageContainer를 중앙에 배치했습니다.

이미지 컨테이너가 각 행에 9개의 이미지, 3개의 이미지가 있는 3x3 그리드로 변환됩니다.

img 태그에 약간의 너비와 높이를 적용했으므로 9개 이미지 모두에 적용됩니다.

그런 다음 var 함수를 사용하여 animation-duration에 대해 각 이미지에 다른 값을 제공했습니다

.

Calc()는 var에서 제공하는 속성을 계산하고 해당 값을 해당 css 속성에 할당하는 데 사용됩니다.

그런 다음 nth-child() 선택기를 사용하여 이미지에 다른 애니메이션 이름을 제공하고 그리드의 가장자리에 있는 이미지에만 테두리 반경을 부여한 것을 볼 수 있듯이 모든 이미지를 개별적으로 대상으로 지정했습니다.

그런 다음 4가지 유형의 애니메이션 slideLeft,slideRight,slideTop,slideBottom을 만든 후 각 애니메이션은 기본적으로 이미지를 지정된 방향에서 프레임으로 슬라이드합니다.

이동 속성을 사용하여 X축과 Y축을 사용하여 다른 방향에서 이미지를 슬라이드하고 불투명도를 사용하여 이미지가 프레임으로 페이드 인되는 것처럼 보이게 합니다.

참고 - 아래 링크에서 이미지를 그리드와 같은 다른 부분으로 자를 수 있습니다.

https://www.imgonline.com.ua/eng/cut-photo-into-pieces.php

출력 -

이미지를 로컬 호스트가 아닌 Google 드라이브에서 가져오기 때문에 출력이 깨지는 것처럼 보입니다. 따라서 원활하게 보려면 컴퓨터에서 이 애니메이션을 시도하십시오

.

이 게시물을 확인해 주셔서 감사합니다.

저에게 연락하실 수 있습니다 -
인스 타 그램 -
링크드인 -
이메일 - [email protected]

^^ 아래 링크에서 기부로 저를 도울 수 있습니다 감사합니다👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

이 게시물도 확인하십시오.