【CSS】読み込み時にスライドされhover時に灰色のフィルタがかかり拡大するアニメーション

udemy動画内容のメモ・備忘録

index.html

<div class="cover-slide hover-darken inview">
  <img class="img-zoom" src="images/image-1.jpg" alt="">
</div>

style.scss

@import 'mixin';

img {
  max-width: 100%;
  vertical-align: bottom;
}

.cover-slide {
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eaebe6;

    @include animation(
      $name: kf-cover-slide
    );
  }
  &.inview {
    &::after {
      @include animation(
        $name: kf-cover-slide,
        $duration: 1.6s,
        $timing-function: ease-in-out,
        // $fill-mode: normal
      );
    }
  }
}

@keyframes kf-cover-slide {
  0% {
    left: 0;
    right: 100%;
  }
  50% {
    left: 0;
    right: 0;
  }
  100% {
    left: 100%;
    right: 0;
  }
}

.img-zoom {
  opacity: 0;

  .inview & {
    opacity: 1;
    transition: transform 0.3s ease;
    @include animation(
      $name: kf-img-show,
      $duration: 1.6s,
      $timing-function: ease-in-out,
      $fill-mode: normal
    );

    &:hover {
      transform: scale(1.1);
    }
  }
}

@keyframes kf-img-show {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  50.1% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
  }
}

.hover-darken {
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transition: backgorund-color 0.3s ease;
    pointer-events: none;

    @include animation(
      $name: kf-img-show,
      $duration: 1.6s,
      $timing-function: ease-in-out,
      $fill-mode: normal
    );
  }
  &:hover::before {
    background-color: rgba(0, 0, 0, 0.4);
  }
}

_mixin.scss

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}