@mixin bp {
  @media only screen and (max-width: 768px) {
    @content;
  }
}
.slider_css {
  height: 550px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      background-size: cover;
      width: 100%;
      height: 550px;
      position: absolute;
      top: 0;
      left: 0;
      animation-iteration-count: infinite;
      animation-duration: 40s;
      @for $value from 1 through 5 {
        &:nth-child(#{$value}) {
          background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg");
          @if $value % 2 == 0 {
            //偶数
            animation-name: slider-zoomout;
          }
          @else {
            //奇数
            animation-name: slider-zoomin;
          }
          @if $value != 1 {
            //最初以外は透過
            opacity: 0;
          }
          animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する
        }
      }
      img {
        width: 130%;
      }
    }
  }

  @include bp {
    height: 400px;
    ul {
      li {
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
}
// 5~8秒の間だけ透過解除
@keyframes slider-zoomin {
  0% {
    opacity: 0;
    transform: scale(1.0);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes slider-zoomout {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }
  12.5% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  27.5% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: scale(1.0);
  }
}