CSS轮播只一遍又一遍地显示最后一张图片

Question

我正在尝试在我的项目中实现 this 轮播。当我将 HTML 放入 codepen 时，它可以正常工作，但是当我将 css 放入我的项目中时，它只会重复显示第 5 张卡片。我认为它是将所有卡片放在一起，然后将它们全部循环，卡片 5 在上面。

我已经更改了卡片轮播的一些 CSS，但没有什么应该破坏它。是我的卡片样式导致了问题吗？还有什么？

感谢您提供的任何帮助！

HTML：

<div class="card-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjAC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Paint It Black</h5>
        <p class="card-text">Janet Fitch</p>
        <p class="desc">
            "some text"
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=g0OZtYOW1v8C&printsec=frontcover&img=1&zoom=1&source=gbs_api " >
        <div class="descriptions">
        <h5 class="title"> A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)</h5>
        <p class="card-text">George R. R. Martin</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">9780007426232</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=FKzLugEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title"> 1066</h5>
        <p class="card-text">David Armine Howarth</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">0140058508</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=zV4PuFn5gvoC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Sex at Dawn</h5>
        <p class="card-text">Christopher Ryan,Cacilda Jetha</p>
        <p class="desc">
            Some Text
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=XfFvDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
            <h5 class="title">Atomic Habits</h5>
            <p class="card-text">James Clear</p>
            <p class="desc">
                Some Text
            </p>
            <div class="hide">9780735211292</div>
            <button (click)="addToCart($event)" class="btn cart">Cart</button>
            <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
  </div>

CSS（我稍作改动）

/* *************************
       Card Carousel
**************************** */
@keyframes display {
  0% {
    transform: translateX(300px);
    opacity: 0;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  80% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-300px);
    opacity: 0;
  }
}

.card-ctn {
  position: relative;
  height: 400px;
  margin-bottom: -30px;
  overflow: hidden;
  margin-top: -30px;
}

.card-ctn > .card {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  animation: display 8s infinite;
}

.card:nth-child(2) {
  animation-delay: 2s;
}
.card:nth-child(3) {
  animation-delay: 4s;
}
.card:nth-child(4) {
  animation-delay: 6s;
}
.card:nth-child(5) {
  animation-delay: 8s;
}

/* *************************
      End Card Carousel
**************************** */

/* *************************
      Card Styles
**************************** */
.card {
  flex: 1;
  flex-basis: 300px;
  flex-grow: 0;
  height: 300px;
  width: 200px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  overflow: hidden;
  position: relative;
  margin-top: 38px;
  margin-left: 20px;
}
.card img {
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
}
.descriptions {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all 0.7s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  clip-path: circle(0% at 100% 100%);
}
.card:hover .descriptions {
  left: 0px;
  transition: all 0.7s ease-in-out;
  clip-path: circle(75%);
}
.card:hover {
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  transform: scale(0.97);
}
.card:hover img {
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  transform: scale(1.6) rotate(20deg);
  filter: blur(3px);
}
.card h5 {
  color: white;
  text-shadow: 0 0 5px black;
  letter-spacing: 1px;
  margin: 0px;
  margin-top: -20px;
  height: 45px;
  overflow: hidden;
}

.card p {
  color: white;
  text-shadow: 0 0 5px black;
  line-height: 24px;
  font-size: 15px;
}
.card-text {
  height: 47px;
}
.card:hover .desc {
  background: rgba(54, 54, 54, 0.356);
  border-radius: 10px 0 0 10px;
}
.desc {
  height: 100px;
  height: 147px;
  width: 100%;
  overflow-y: scroll;
  padding-right: 40px;
  margin-bottom: 20px;
  margin-top: -12px;
  box-sizing: content-box;
  mix-blend-mode: difference;
}

.card button {
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 30px;
  cursor: pointer;
  border-style: none;
  background-color: #04a304;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease-in-out;
}
.wish {
  right: 10px;
}
.cart {
  left: 10px;
}

.card button:hover {
  transform: scale(0.95) translateX(-5px);
  transition: all 0.5s ease-in-out;
}

.hide {
  opacity: 0;
}

Answer 1

它对我有用！

html, body {
  margin: 0;
  padding: 0;
}

.pic-ctn {
  width: 100vw;
  height: 200px;
}

@keyframes display {
  0% {
    transform: translateX(200px);
    opacity: 0;
  }
  10% {
    transform: translateX(0);
    opacity: 1;
  }
  20% {
    transform: translateX(0);
    opacity: 1;
  }
  30% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-200px);
    opacity: 0;
  }
}

.pic-ctn {
  position: relative;
  width: 100vw;
  height: 300px;
  margin-top: 15vh;
}

.pic-ctn > .card {
  position: absolute;
  top: 0;
  left: calc(50% - 100px);
  opacity: 0;
  animation: display 10s infinite;
}

.card:nth-child(2) {
  animation-delay: 2s;
}
.card:nth-child(3) {
  animation-delay: 4s;
}
.card:nth-child(4) {
  animation-delay: 6s;
}
.card:nth-child(5) {
  animation-delay: 8s;
}
.card {
  flex: 1;
  flex-basis: 300px;
  flex-grow: 0;
  height: 300px;
  width: 200px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.5);
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  overflow: hidden;
  position: relative;
  margin-top: 38px;
  margin-left: 20px;
}
.card img {
  width: 100%;
  height: 100%;
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
}
.descriptions {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: all 0.7s ease-in-out;
  padding: 20px;
  box-sizing: border-box;
  clip-path: circle(0% at 100% 100%);
}
.card:hover .descriptions {
  left: 0px;
  transition: all 0.7s ease-in-out;
  clip-path: circle(75%);
}
.card:hover {
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.3);
  transform: scale(0.97);
}
.card:hover img {
  transition: all 0.5s cubic-bezier(0.8, 0.5, 0.2, 1.4);
  transform: scale(1.6) rotate(20deg);
  filter: blur(3px);
}
.card h5 {
  color: white;
  text-shadow: 0 0 5px black;
  letter-spacing: 1px;
  margin: 0px;
  margin-top: -20px;
  height: 45px;
  overflow: hidden;
}

.card p {
  color: white;
  text-shadow: 0 0 5px black;
  line-height: 24px;
  font-size: 15px;
}
.card-text {
  height: 47px;
}
.card:hover .desc {
  background: rgba(54, 54, 54, 0.356);
  border-radius: 10px 0 0 10px;
}
.desc {
  height: 100px;
  height: 147px;
  width: 100%;
  overflow-y: scroll;
  padding-right: 40px;
  margin-bottom: 20px;
  margin-top: -12px;
  box-sizing: content-box;
  mix-blend-mode: difference;
}

.card button {
  position: absolute;
  bottom: 15px;
  width: 70px;
  height: 30px;
  cursor: pointer;
  border-style: none;
  background-color: #04a304;
  color: #fff;
  font-size: 13px;
  outline: none;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
  transition: all 0.5s ease-in-out;
}
.wish {
  right: 10px;
}
.cart {
  left: 10px;
}

.card button:hover {
  transform: scale(0.95) translateX(-5px);
  transition: all 0.5s ease-in-out;
}

.hide {
  opacity: 0;
}

<div class="pic-ctn">
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=1Kw1elu9QjAC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Paint It Black</h5>
        <p class="card-text">Janet Fitch</p>
        <p class="desc">
            "some text"
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=g0OZtYOW1v8C&printsec=frontcover&img=1&zoom=1&source=gbs_api " >
        <div class="descriptions">
        <h5 class="title"> A Storm of Swords Complete Edition (Two in One) (A Song of Ice and Fire, Book 3)</h5>
        <p class="card-text">George R. R. Martin</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">9780007426232</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=FKzLugEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title"> 1066</h5>
        <p class="card-text">David Armine Howarth</p>
        <p class="desc">
            some text
        </p>
        <div class="hide">0140058508</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=zV4PuFn5gvoC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
        <h5 class="title">Sex at Dawn</h5>
        <p class="card-text">Christopher Ryan,Cacilda Jetha</p>
        <p class="desc">
            Some Text
        </p>
        <div class="hide">075956812X</div>
        <button (click)="addToCart($event)" class="btn cart">Cart</button>
        <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
    <div class="card" >
        <img src= "http://books.google.com/books/content?id=XfFvDwAAQBAJ&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api" >
        <div class="descriptions">
            <h5 class="title">Atomic Habits</h5>
            <p class="card-text">James Clear</p>
            <p class="desc">
                Some Text
            </p>
            <div class="hide">9780735211292</div>
            <button (click)="addToCart($event)" class="btn cart">Cart</button>
            <button (click)="addToWishlist($event)" class="btn wish">Wishlist</button>
        </div>
    </div>
  </div>