CSS carousel only shows last picture over and over - html

Question

I am trying to implement this carousel in my project. When I put my HTML into the codepen, it works fine, but when I put the css in my project it will only show the 5th card on repeat. I think it is placing all the cards on top of each other and cycling them all at once with card 5 on top.
I have changed a little bit of the css for the card carousel, but nothing that should be breaking it. Is it my card styles that are causing the issue? Something else?
Thank you for any help you can provide!
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 (which I changed a little bit)
/* *************************
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

It works for me!
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>