Daily animations

Create Card Animation CSS Hover Effect

In this tutorial we will create an amazing card animation css hover effect using just CSS and HTML. Even if there is a lot of code to write the animation is very simple. There are many lines of code because every card will have different css properites in order to make them to stay like in a playing cards deck. To see the animation you can watch the bottom video. The animation is very nice and can be implemented very fast.

Card Animation CSS

Let's create the HTML structure for the whole playing cards deck.

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="cards">
    <div class="card">
      <div class="card-face">
        <div class="card-label">1</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">2</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">3</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">4</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">5</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">6</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">7</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">8</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">9</div>
      </div>
    </div>
    <div class="card">
      <div class="card-face">
        <div class="card-label">10</div>
      </div>
    </div>
  </div>
</body>
</html>

As you can see the HTML structure is very simple, basically we have the same div.card structure repeated 10 times in order to create 10 different cards. Then, with CSS, we create different background colors, position, and hover effect for every single card. Anyway if you don't need all those cards you can remove them from the HTML structure.

CSS:

html,body{
  height:100%;
}
body{
  background:radial-gradient(#333, #111);
  overflow:hidden;
}
.cards{
  bottom:0;
  display:-webkit-box;
  display:flex;
  height:150px;
  padding:0 50px;
  -webkit-box-pack:center;
  justify-content: center;
  position:fixed;
  left:0;
  right:0;
}
.card{
  height:150px;
  margin:0 -25px;
  position:relative;
  width: 100px;
}
.card:after{
  content:"";
  bottom:0;
  left:-60px;
  position:absolute;
  right:-60px;
  top:0;
  z-index:10;
}
.card-face{
  bottom:0;
  left:0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top:0;
  -webkit-transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform;
  transition: 800ms cubic-bezier(0.19, 1, 0.22, 1) transform, 800ms cubic-bezier(0.19, 1, 0.22, 1) -webkit-transform;
}
.card-face:after{
  content:"";
  -webkit-animation:none;
  animation:none;
  background:#fff;
  bottom:0;
  left:0;
  opacity:0;
  position:absolute;
  right:0;
  top:0;
}
.card-label{
  font-family: 'Open Sans';
  font-size:24px;
  font-weight:700;
  letter-spacing: -0.025em;
  padding: 15px 0 0 15px;
}


.card:nth-child(1) .card-face{
  background: linear-gradient(-135deg, #ff9999, #da0b0b);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 153, 0.75);
    -webkit-transform: translateY(45px) rotate(-28.125deg);
    transform: translateY(45px) rotate(-28.125deg);
}
.card:nth-child(1) .card-face .card-label {
    color: #db0000;
    text-shadow: -0.025em 0.025em 0 #ff8080;
}
.card:nth-child(1):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,153,153,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(1):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(1):hover:after{
  top:-175px;
}


.card:nth-child(2) .card-face{
  background: linear-gradient(-135deg, #ff99d6, #da0b87);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 214, 0.75);
    -webkit-transform: translateY(35px) rotate(-21.875deg);
    transform: translateY(35px) rotate(-21.875deg);
}
.card:nth-child(2) .card-face .card-label {
    color: #db0084;
    text-shadow: -0.025em 0.025em 0 #ff80cc;
}
.card:nth-child(2):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,153,214,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(2):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(2):hover:after{
  top:-175px;
}



.card:nth-child(3) .card-face{
  background: linear-gradient(-135deg, #eb99ff, #b10bda);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 153, 255, 0.75);
    -webkit-transform: translateY(25px) rotate(-16.625deg);
    transform: translateY(25px) rotate(-16.625deg);
}
.card:nth-child(3) .card-face .card-label {
    color: #af00db;
    text-shadow: -0.025em 0.025em 0 #e680ff;
}
.card:nth-child(3):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,153,255,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(3):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(3):hover:after{
  top:-175px;
}

.card:nth-child(4) .card-face{
  background: linear-gradient(-135deg, #ad99ff, #350bda);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 153, 255, 0.75);
    -webkit-transform: translateY(15px) rotate(-9.375deg);
    transform: translateY(15px) rotate(-9.375deg);
}
.card:nth-child(4) .card-face .card-label {
    color: #2c00db;
    text-shadow: -0.025em 0.025em 0 #9980ff;
}
.card:nth-child(4):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(173,153,255,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(4):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(4):hover:after{
  top:-175px;
}


.card:nth-child(5) .card-face{
  background: linear-gradient(-135deg, #99c2ff, #0b5eda);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 194, 255, 0.75);
    -webkit-transform: translateY(5px) rotate(-3.125deg);
    transform: translateY(5px) rotate(-3.125deg);
}
.card:nth-child(5) .card-face .card-label {
    color: #0058db;
    text-shadow: -0.025em 0.025em 0 #80b3ff;
}
.card:nth-child(5):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(153,194,255,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(5):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(5):hover:after{
  top:-175px;
}

.card:nth-child(6) .card-face{
  background: linear-gradient(-135deg, #99ffff, #0bdada);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 255, 0.75);
    -webkit-transform: translateY(5px) rotate(3.125deg);
    transform: translateY(5px) rotate(3.125deg);
}
.card:nth-child(6) .card-face .card-label {
    color: #00dbdb;
    text-shadow: -0.025em 0.025em 0 #80ffff;
}
.card:nth-child(6):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(153,255,255,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(6):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(6):hover:after{
  top:-175px;
}


.card:nth-child(7) .card-face{
  background: linear-gradient(-135deg, #99ffc2, #0bda5e);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(153, 255, 194, 0.75);
    -webkit-transform: translateY(15px) rotate(9.375deg);
    transform: translateY(15px) rotate(9.375deg);
}
.card:nth-child(7) .card-face .card-label {
    color: #00db58;
    text-shadow: -0.025em 0.025em 0 #80ffb3;
}
.card:nth-child(7):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(153,255,194,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(7):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(7):hover:after{
  top:-175px;
}


.card:nth-child(8) .card-face{
  background: linear-gradient(-135deg, #adff99, #35da0b);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(173, 255, 153, 0.75);
    -webkit-transform: translateY(25px) rotate(15.625deg);
    transform: translateY(25px) rotate(15.625deg);
}
.card:nth-child(8) .card-face .card-label {
    color: #2cdb00;
    text-shadow: -0.025em 0.025em 0 #99ff80;
}
.card:nth-child(8):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(173,255,153,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(8):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(8):hover:after{
  top:-175px;
}

.card:nth-child(9) .card-face{
  background: linear-gradient(-135deg, #ebff99, #b1da0b);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 255, 153, 0.75);
    -webkit-transform: translateY(35px) rotate(21.875deg);
    transform: translateY(35px) rotate(21.875deg);
}
.card:nth-child(9) .card-face .card-label {
    color: #afdb00;
    text-shadow: -0.025em 0.025em 0 #e6ff80;
}
.card:nth-child(9):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,255,153,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(9):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(9):hover:after{
  top:-175px;
}


.card:nth-child(10) .card-face{
  background: linear-gradient(-135deg, #ffd699, #da870b);
    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.15), inset 0 0 0 2px rgba(255, 214, 153, 0.75);
    -webkit-transform: translateY(45px) rotate(28.125deg);
    transform: translateY(45px) rotate(28.125deg);
}
.card:nth-child(10) .card-face .card-label {
    color: #db8400;
    text-shadow: -0.025em 0.025em 0 #ffcc80;
}
.card:nth-child(10):hover .card-face{
  box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 0 2px rgba(255,214,153,0.75);
  -wewbkit-transform:translateY(-100px) rotate(0deg) scale(2);
  transform:translateY(-100px) rotate(0deg) scale(2);
  -webkit-transition-duration: 0ms;
  transition-duration: 0ms;
  z-index:5;
}
.card:nth-child(10):hover .card-face:after{
  -webkit-animation:fade 250ms ease-out forwards;
  animation:fade 250ms ease-out forwards;
}
.card:nth-child(10):hover:after{
  top:-175px;
}




@-wewbkit-keyframes fade{
  0%{
    opacity:0.9;
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    opacity:0;
    -webkit-transform:scale(1.15);
    transform:scale(1.15);
  }
}
@keyframes fade{
  0%{
    opacity:0.9;
    -webkit-transform:scale(1);
    transform:scale(1);
  }
  100%{
    opacity:0;
    -webkit-transform:scale(1.15);
    transform:scale(1.15);
  }
}

It's a lot of code here, but if you look closely you will find out that many lines of code here are repeated just few css properites will change for every card. We change just linear-gradient background color, the box shadow and the rotate property, only that. With this code you have a fully card animation css hover effect in your website. Let me know in the comments section if you need any help.

TAGs amazing animations css animation card css bootstrap card animation bootstrap card hover effects card animation css create card animation css card hover effects css hover effect

Related Article.

  1. CSS Typewriter Effect Animation Using Only CSS & HTML
  2. How To Create Stunning Animations Using Sprite CSS
  3. Amazing Text Animation Effect Flying Letters Animation
0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

Nice Tools.

Recent Posts.

April 22, 2020

Benefits of Web3: Unlocking a New Era of the Internet

April 22, 2020

Is ReactJS Used for Frontend or Backend?

April 22, 2020

Is React Still Good in 2024?

April 22, 2020

Is ReactJS Easy to Learn?

April 22, 2020

Is ReactJS Still Used?

Categories.

0
Would love your thoughts, please comment.x
()
x