animated standing cards
animated standing cards

Hy Everyone, In this tutorial we will design animated standing cards using CSS. CSS cards are easy to design and animate.

Our Design will be simple and easy to create, we will design 4 cards. when the user hovers on the card, the card will shake and slips to the bottom, after that animation will start on the logo box, it will go up like a rocket and come to its initial position. Let’s create our cards!

CSS Cards | Animated Standing Cards

For creating this card we will start with our index.html file, first, we will create an ordered list in the body tag.

<body>
   <ol>

   </ol>
</body>


After creating ordered list ( <ol> tag), create list items.

<li style="--accent-color:#6710F5">
    <div class="icon"><i class="fa-brands fa-html5"></i></div>
    <div class="title">HTML 5</div>
    <div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
</li>


Here we created a variable in style attribute as –accent-color it will be used in our CSS file to give different colors to each item in the list.
Inside the li tag, we have created a div whose class name is an icon, in this div, we will put our icon (for icon we are using font awesome CDN given in CSS file).
In the next div as class name title, we will write our title.
In the next div, we will write our description.

here we want 4 items so we copied this <li> to </li> section four times and changed the –accent-color variable values to different colors.

here the index.html code will look like this:

index.html

<!DOCTYPE html>
<head>
  <title>Animated Standing Cards</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<ol>
    <li style="--accent-color:#6710F5">
        <div class="icon"><i class="fa-brands fa-html5"></i></div>
        <div class="title">HTML 5</div>
        <div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    </li>
    <li style="--accent-color:#6F42C1">
        <div class="icon"><i class="fa-brands fa-css3"></i></div>
        <div class="title">CSS 3</div>
        <div class="descr">Lorem ipsum dolor sit.</div>
    </li>
    <li style="--accent-color:#D63384">
        <div class="icon"><i class="fa-brands fa-js"></i></div>
        <div class="title">Javascript</div>
        <div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor laboriosam odio alias.</div>
    </li>
    <li style="--accent-color:#DC3545">
        <div class="icon"><i class="fa-brands fa-github"></i></div>
        <div class="title">Github</div>
        <div class="descr">Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
    </li>
</ol>
</div>
</body>
</html>


Let’s write the code for the style.css file:

Here we will import icons from font awesome and fonts from google.

@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Oxygen:[email protected];400;700&display=swap");


now set the universal margin, padding, and box-sizing for all.

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


Set up the variables in the body section like color, background color, and minimum height. In extra details gap between two elements with their alignments.

body {
  --color: rgba(30, 30, 30);
  --bgColor: rgb(215, 215, 215);
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Oxygen", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}


set up the display property, gap, content alignment etc. in ol element.

ol {
  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;
  gap: 2rem;

  list-style: none;
  counter-reset: cardnr;
  justify-content: center;
}

creating other variables in the list item element CSS. Their front color, width, inline padding, border radius, etc. here we are including all CSS related to the list item.

li {
  --frontColor: white;
  --width: 10em;
  --inlineP: 0.5rem;
  --borderR: 4rem;
  --arrowW: 2rem;
  --arrowH: 1.5rem;
  counter-increment: cardnr;
  width: calc(var(--width) - var(--inlineP) * 2);
  display: grid;
  grid-template:
    "icon" var(--borderR)
    "title"
    "descr" 1fr;
  margin-inline: var(--inlineP);
  margin-bottom: calc(var(--borderR));
  position: relative;
}
li .icon,
li .title,
li .descr {
  background: var(--frontColor);
  padding-inline: 1rem;
  padding-bottom: 1rem;
}
li .icon,
li .title {
  color: var(--accent-color);
  text-align: center;
  padding-bottom: 0.5rem;
}

li .title,
li .descr {
  filter: drop-shadow(0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25));
}
li .icon {
  grid-area: icon;
  font-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--borderR) 0 0 0;
  position: relative;
}

li .title {
  grid-area: title;
  font-size: 1.1rem;
  font-weight: bold;
}

li .descr {
  grid-area: descr;
  font-size: 0.85rem;
  text-align: center;
}
li .descr::before {
  content: "";
  width: var(--arrowW);
  height: var(--arrowH);
  position: absolute;
  right: 1.5rem;
  top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

li::after {
  content: counter(cardnr, decimal-leading-zero);
  position: absolute;
  z-index: -1;

  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);
  top: var(--borderR);
  bottom: calc(var(--borderR) * -1);

  display: flex;
  align-items: flex-end;
  background: var(--accent-color);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.25),
    transparent 25% 75%,
    rgba(0, 0, 0, 0.25)
  );

  --pad: 1rem;
  padding: var(--pad);
  font-size: calc(var(--borderR) - var(--pad) * 2);
  color: white;
}
li::before {
  content: "";
  position: absolute;
  height: var(--borderR);
  top: calc(100% + var(--borderR) - 2px);
  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);

  background-image: linear-gradient(var(--accent-color), transparent 60%);
  opacity: 0.5;
  filter: blur(2px);
}


our basic CSS work is done till this, now we will animate our cards on hover effects.

li:hover{
  animation: shake 0.5s linear forwards;
}


this effect will work on hovering on any cards.

li:not(:hover){
  transition-duration: 1s;
}


Here we have set transition duration, when the user removes the cursor, the element will come back to their initial positions within 1 second.

li:hover > .icon i{
  animation: move 0.7s linear forwards;
}


In this section when a user hovers on the list item the animation will be on .icon’s i tag.

li:hover > .icon{

  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
  animation: horizontalMove 1s linear forwards;
  animation-delay: 0.55s;
 }


In this, the animation will be starting on .icon class only.

@keyframes shake {
  0%{
    transform: rotateZ(-6deg);
  }
  20%{
    transform: rotateZ(6deg);
  }
  40%{
    transform: rotateZ(-3deg) translateY(3px);
  }
  60%{
    transform: rotateZ(3deg) translateY(6px);
  }
  80%{
    transform: rotateZ(-2deg) translateY(9px);
  }
  100%{
    transform: rotateZ(0deg) translateY(12px);
  }
}


this animation is used for shaky effect. This effect is working on <li> list item tag.

@keyframes move {
  0%{
    transform: translateX(6px);
  }
  20%{
    transform: translateX(-6px);
  }
  40%{
    transform: translateX(3px);
  }
  60%{
    transform: translateX(-3px);
  }
  80%{
    transform: translateX(2px);
  }
  100%{
    transform: translateX(0px);
  }
}


This is also a shaky animation but it is the opposite of the shake effect. It works in opposite direction than the shaky animation.

@keyframes horizontalMove {
  0%{
    transform: translateY(-40px);
  }
  20%{
    transform: translateY(-30px);
  }
  40%{
    transform: translateY(-20px);
  }
  60%{
    transform: translateY(-15px);
  }
  80%{
    transform: translateY(-13px);
  }
  100%{
    transform: translateY(-12px);
  }
}


It works when all animations are done, it launches the icon part ( .icon class ) upside with a rocket launch, then comes to its previous position on -12px.

Here it was all about our CSS. Here is all code of the .css file.

style.css

@import url("https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css");
@import url("https://fonts.googleapis.com/css2?family=Oxygen:[email protected];400;700&display=swap");

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --color: rgba(30, 30, 30);
  --bgColor: rgb(215, 215, 215);
  min-height: 100vh;

  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;
  font-family: "Oxygen", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}

ol {
  width: min(60rem, 90%);
  margin-inline: auto;

  display: flex;
  flex-wrap: wrap;
  gap: 2rem;

  list-style: none;
  counter-reset: cardnr;
  justify-content: center;
}

li {
  --frontColor: white;
  --width: 10em;
  --inlineP: 0.5rem;
  --borderR: 4rem;
  --arrowW: 2rem;
  --arrowH: 1.5rem;
  counter-increment: cardnr;
  width: calc(var(--width) - var(--inlineP) * 2);
  display: grid;
  grid-template:
    "icon" var(--borderR)
    "title"
    "descr" 1fr;
  margin-inline: var(--inlineP);
  margin-bottom: calc(var(--borderR));
  position: relative;
}
li .icon,
li .title,
li .descr {
  background: var(--frontColor);
  padding-inline: 1rem;
  padding-bottom: 1rem;
}
li .icon,
li .title {
  color: var(--accent-color);
  text-align: center;
  padding-bottom: 0.5rem;
}

li .title,
li .descr {
  filter: drop-shadow(0.125rem 0.125rem 0.075rem rgba(0, 0, 0, 0.25));
}
li .icon {
  grid-area: icon;
  font-size: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--borderR) 0 0 0;
  position: relative;
}

li .title {
  grid-area: title;
  font-size: 1.1rem;
  font-weight: bold;
}

li .descr {
  grid-area: descr;
  font-size: 0.85rem;
  text-align: center;
}
li .descr::before {
  content: "";
  width: var(--arrowW);
  height: var(--arrowH);
  position: absolute;
  right: 1.5rem;
  top: 100%;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

li::after {
  content: counter(cardnr, decimal-leading-zero);
  position: absolute;
  z-index: -1;

  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);
  top: var(--borderR);
  bottom: calc(var(--borderR) * -1);

  display: flex;
  align-items: flex-end;
  background: var(--accent-color);
  background-image: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.25),
    transparent 25% 75%,
    rgba(0, 0, 0, 0.25)
  );

  --pad: 1rem;
  padding: var(--pad);
  font-size: calc(var(--borderR) - var(--pad) * 2);
  color: white;
}
li::before {
  content: "";
  position: absolute;
  height: var(--borderR);
  top: calc(100% + var(--borderR) - 2px);
  left: calc(var(--inlineP) * -1);
  right: calc(var(--inlineP) * -1);

  background-image: linear-gradient(var(--accent-color), transparent 60%);
  opacity: 0.5;
  filter: blur(2px);
}

li:hover{
  animation: shake 0.5s linear forwards;
}

li:not(:hover){
  transition-duration: 1s;
}
li:hover > .icon i{
  animation: move 0.7s linear forwards;
}
li:hover > .icon{

  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.5);
  animation: horizontalMove 1s linear forwards;
  animation-delay: 0.55s;
 }

@keyframes shake {
  0%{
    transform: rotateZ(-6deg);
  }
  20%{
    transform: rotateZ(6deg);
  }
  40%{
    transform: rotateZ(-3deg) translateY(3px);
  }
  60%{
    transform: rotateZ(3deg) translateY(6px);
  }
  80%{
    transform: rotateZ(-2deg) translateY(9px);
  }
  100%{
    transform: rotateZ(0deg) translateY(12px);
  }
}

@keyframes move {
  0%{
    transform: translateX(6px);
  }
  20%{
    transform: translateX(-6px);
  }
  40%{
    transform: translateX(3px);
  }
  60%{
    transform: translateX(-3px);
  }
  80%{
    transform: translateX(2px);
  }
  100%{
    transform: translateX(0px);
  }
}

@keyframes horizontalMove {
  0%{
    transform: translateY(-40px);
  }
  20%{
    transform: translateY(-30px);
  }
  40%{
    transform: translateY(-20px);
  }
  60%{
    transform: translateY(-15px);
  }
  80%{
    transform: translateY(-13px);
  }
  100%{
    transform: translateY(-12px);
  }
}


if you are having any issues with this code then you can visit our GitHub account for the code. Click Here!

Thank You!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply