Card Animations

Bootstrap Card animations

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Bootstrap card animations is a set of standard illusions of motions that can be applied to the Bootstrap cards to improve the user experience.

Vue live preview

See the following Bootstrap animations examples:

Card with share button MDB Pro component

Click on the button to launch the animation.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<template>
  <mdb-row>
    <mdb-col sm="4">
      <mdb-card>
        <mdb-view hover>
          <a href="#!">
            <mdb-card-image
              src="https://mdbootstrap.com/img/Photos/Others/photo9.webp"
              alt="Card image cap"
            ></mdb-card-image>
            <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
          </a>
        </mdb-view>
        <mdb-row class="justify-content-end mr-2 mb-4">
          <transition name="social-fb-btn">
            <mdb-btn v-if="show" tag="a" floating action class="btn-fb">
              <mdb-icon fab icon="facebook-f" />
            </mdb-btn>
          </transition>
          <transition name="social-tw-btn">
            <mdb-btn v-if="show" tag="a" floating action class="btn-tw">
              <mdb-icon fab icon="twitter" />
            </mdb-btn>
          </transition>
          <transition name="social-gplus-btn">
            <mdb-btn v-if="show" tag="a" floating action class="btn-gplus">
              <mdb-icon fab icon="google-plus-g" />
            </mdb-btn>
          </transition>
          <mdb-btn tag="a" floating action color="indigo" @click="show = !show">
            <mdb-icon icon="share-alt" />
          </mdb-btn>
        </mdb-row>

        <mdb-card-body>
          <mdb-card-title>Card title</mdb-card-title>
          <hr />
          <p
            class="font-small grey-dark-text"
          >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <mdb-btn rounded color="indigo">Read more</mdb-btn>
        </mdb-card-body>
      </mdb-card>
    </mdb-col>
  </mdb-row>
</template>
<script>
  import {
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardImage,
    mdbCardBody,
    mdbCardTitle,
    mdbCardUp,
    mdbBtn,
    mdbView,
    mdbMask,
    mdbIcon,
  } from "mdbvue";

  export default {
    name: "CardAnimationsPage",
    components: {
      mdbRow,
      mdbCol,
      mdbCard,
      mdbCardImage,
      mdbCardBody,
      mdbCardTitle,
      mdbCardUp,
      mdbBtn,
      mdbView,
      mdbMask,
      mdbIcon,
    },
    data() {
      return {
        show: false
      };
    }
  };
</script>
<style>
  .social-fb-btn-enter-active {
    transition: all 0.7s ease;
  }
  .social-fb-btn-leave-active {
    transition: all 0.3s ease;
  }
  .social-fb-btn-enter,
  .social-fb-btn-leave-to {
    transform: translateX(100px);
    opacity: 0;
  }
  .social-tw-btn-enter-active {
    transition: all 0.5s ease;
  }
  .social-tw-btn-leave-active {
    transition: all 0.3s ease;
  }
  .social-tw-btn-enter,
  .social-tw-btn-leave-to {
    transform: translateX(70px);
    opacity: 0;
  }
  .social-gplus-btn-enter-active {
    transition: all 0.3s ease;
  }
  .social-gplus-btn-leave-active {
    transition: all 0.3s ease;
  }
  .social-gplus-btn-enter,
  .social-gplus-btn-leave-to {
    transform: translateX(40px);
    opacity: 0;
  }
</style>

Card with share icon MDB Pro component

Click on the icon to launch the animation. You can customize animation by defining position to 'top', 'left', 'right'. Horizontal sliding effect requires passing to sliding-card additional parameter width to maintain card's layout through animation. See API tab for more information.

Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Read more

Social shares

Join our community
<template>
  <mdb-container>
    <mdb-row>
      <mdb-col sm="4">
        <mdb-card class="mt-5 pb-1">
          <mdb-sliding-card :show="show">
            <mdb-card-body>
              <mdb-card-title class="text-center">
                Social shares
                <mdb-btn flat @click="show = !show" class="float-right p-0 m-0">
                  <mdb-icon icon="times" size="lg" color />
                </mdb-btn>
              </mdb-card-title>
              <hr />
              <mdb-row class="justify-content-center pt-3">
                <mdb-btn tag="a" floating class="btn-dribbble">
                  <mdb-icon fab icon="dribbble" />
                </mdb-btn>
                <mdb-btn tag="a" floating class="btn-slack">
                  <mdb-icon fab icon="slack-hash" />
                </mdb-btn>
                <mdb-btn tag="a" floating class="btn-ins">
                  <mdb-icon fab icon="instagram" />
                </mdb-btn>
                <mdb-btn tag="a" floating class="btn-pin">
                  <mdb-icon fab icon="pinterest" />
                </mdb-btn>
              </mdb-row>
              <mdb-row class="justify-content-center">
                <mdb-btn tag="a" floating class="btn-tw">
                  <mdb-icon fab icon="twitter" />
                </mdb-btn>
                <mdb-btn tag="a" floating class="btn-gplus">
                  <mdb-icon fab icon="google-plus-g" />
                </mdb-btn>
                <mdb-btn tag="a" floating class="btn-git">
                  <mdb-icon fab icon="github" />
                </mdb-btn>
              </mdb-row>
              <h5 class="text-center pt-5 pb-2">Join our community</h5>
              <hr />
              <mdb-row class="justify-content-center pt-4">
                <mdb-btn tag="a" class="pl-4 pr-4 btn-fb">
                  <mdb-icon fab icon="facebook-f" />
                </mdb-btn>
                <mdb-btn tag="a" class="pl-4 pr-4 btn-tw">
                  <mdb-icon fab icon="twitter" />
                </mdb-btn>
                <mdb-btn tag="a" class="pl-4 pr-4 btn-li">
                  <mdb-icon fab icon="linkedin-in" />
                </mdb-btn>
                <mdb-btn tag="a" class="pl-4 pr-4 btn-ins">
                  <mdb-icon fab icon="instagram" />
                </mdb-btn>
              </mdb-row>
            </mdb-card-body>
          </mdb-sliding-card>
          <mdb-view hover>
            <a href="#!">
              <mdb-card-image
                src="https://mdbootstrap.com/img/Photos/Others/photo11.webp"
                alt="Card image cap"
              ></mdb-card-image>
              <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
            </a>
          </mdb-view>
          <mdb-card-body>
            <mdb-card-title class="d-flex justify-content-between align-items-center">
              Card title
              <mdb-btn flat @click="show = !show" class="p-0 m-0">
                <mdb-icon icon="share-alt" size="lg" />
              </mdb-btn>
            </mdb-card-title>
            <hr />
            <p
              class="font-small grey-dark-text"
            >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            <mdb-btn class="pl-0" flat>
              Read more
              <mdb-icon class="pl-2" icon="angle-double-right" />
            </mdb-btn>
          </mdb-card-body>
        </mdb-card>
      </mdb-col>
    </mdb-row>
  </mdb-container>
</template>
<script>
  import {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardImage,
    mdbCardBody,
    mdbCardTitle,
    mdbCardFooter,
    mdbBtn,
    mdbView,
    mdbMask,
    mdbIcon,
    mdbSlidingCard
  } from "mdbvue";
  export default {
    name: "CardAnimationsPage",
    components: {
      mdbContainer,
      mdbRow,
      mdbCol,
      mdbCard,
      mdbCardImage,
      mdbCardBody,
      mdbCardTitle,
      mdbCardFooter,
      mdbBtn,
      mdbView,
      mdbMask,
      mdbIcon,
      mdbSlidingCard
    },
    data() {
      return {
        show: false
      };
    }
  };
</script>

Rotating card - version 1 MDB Pro component

Click on the icon to launch the animation.

Example photo

Card title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Read more

Social shares

Join our community
<template>
  <mdb-container>
    <mdb-flipping-card
      :flipped="flipped"
      innerClass="text-center h-100 w-100"
      style="max-width: 22rem; height: 465px;"
    >
      <mdb-card class="face front">
        <mdb-view hover>
          <a href="#!">
            <mdb-card-image
              src="https://mdbootstrap.com/img/Photos/Others/photo5.webp"
              alt="Card image cap"
            ></mdb-card-image>
            <mdb-mask flex-center waves overlay="white-slight"></mdb-mask>
          </a>
        </mdb-view>
        <mdb-card-body>
          <mdb-card-title class="pl-5">
            Card title
            <mdb-btn class="float-right pb-5" style="bottom: 10px" flat @click="flipped=true">
              <mdb-icon size="lg" class="black-text" icon="share-alt" />
            </mdb-btn>
          </mdb-card-title>
          <hr />
          <p
            class="font-small grey-dark-text"
          >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          <mdb-btn flat>
            Read more
            <mdb-icon class="pl-2" icon="angle-double-right" />
          </mdb-btn>
        </mdb-card-body>
      </mdb-card>
      <mdb-card class="face back" style="height: 465px;">
        <mdb-card-body>
          <mdb-card-title class="pl-5">
            Social shares
            <mdb-btn style="bottom: 10px" flat @click="flipped=false">
              <mdb-icon size="lg" icon="times" />
            </mdb-btn>
          </mdb-card-title>
          <hr />
          <mdb-row class="justify-content-center pt-3">
            <mdb-btn tag="a" floating class="btn-dribbble">
              <mdb-icon fab icon="dribbble" />
            </mdb-btn>
            <mdb-btn tag="a" floating class="btn-slack">
              <mdb-icon fab icon="slack-hash" />
            </mdb-btn>
            <mdb-btn tag="a" floating class="btn-ins">
              <mdb-icon fab icon="instagram" />
            </mdb-btn>
            <mdb-btn tag="a" floating class="btn-pin">
              <mdb-icon fab icon="pinterest" />
            </mdb-btn>
          </mdb-row>
          <mdb-row class="justify-content-center">
            <mdb-btn tag="a" floating class="btn-tw">
              <mdb-icon fab icon="twitter" />
            </mdb-btn>
            <mdb-btn tag="a" floating class="btn-gplus">
              <mdb-icon fab icon="google-plus-g" />
            </mdb-btn>
            <mdb-btn tag="a" floating class="btn-git">
              <mdb-icon fab icon="github" />
            </mdb-btn>
          </mdb-row>
          <h5 class="text-center pt-5 pb-2">Join our community</h5>
          <hr />
          <mdb-row class="justify-content-center pt-4">
            <mdb-btn tag="a" class="pl-4 pr-4 btn-fb">
              <mdb-icon fab icon="facebook-f" />
            </mdb-btn>
            <mdb-btn tag="a" class="pl-4 pr-4 btn-tw">
              <mdb-icon fab icon="twitter" />
            </mdb-btn>
            <mdb-btn tag="a" class="pl-4 pr-4 btn-li">
              <mdb-icon fab icon="linkedin-in" />
            </mdb-btn>
            <mdb-btn tag="a" class="pl-4 pr-4 btn-ins">
              <mdb-icon fab icon="instagram" />
            </mdb-btn>
          </mdb-row>
        </mdb-card-body>
      </mdb-card>
    </mdb-flipping-card>
  </mdb-container>
</template>
<script>
  import {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardImage,
    mdbCardBody,
    mdbCardTitle,
    mdbCardUp,
    mdbCardAvatar,
    mdbBtn,
    mdbView,
    mdbMask,
    mdbIcon,
    mdbFlippingCard,
    mdbAvatar
  } from "mdbvue";
  export default {
    name: "CardAnimationsPage",
    components: {
      mdbContainer,
      mdbRow,
      mdbCol,
      mdbCard,
      mdbCardImage,
      mdbCardBody,
      mdbCardTitle,
      mdbCardUp,
      mdbCardAvatar,
      mdbBtn,
      mdbView,
      mdbMask,
      mdbIcon,
      mdbFlippingCard,
      mdbAvatar
    },
    data() {
      return {
        flipped: false
      };
    }
  };
</script>

Rotating card - version 2 MDB Pro component

Click to rotate.

Image with a photo of clouds.
Sample avatar image.

Marie Johnson

Web developer

Click here to rotate

About me

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime?

Click here to rotate back 
<template>
  <mdb-container>
    <mdb-flipping-card
      :flipped="flipped"
      innerClass="text-center h-100 w-100"
      style="max-width: 22rem; height: 416px;"
    >
      <mdb-card class="face front" style="height: 416px;">
        <mdb-card-up>
          <img
            class="card-image-top"
            src="https://mdbootstrap.com/img/Photos/Others/photo7.webp"
            alt="a photo of a house facade"
          />
        </mdb-card-up>
        <mdb-avatar class="mx-auto white" circle>
          <img
            src="https://mdbootstrap.com/img/Photos/Avatars/img%20(20).webp"
            class="rounded-circle"
          />
        </mdb-avatar>
        <mdb-card-body>
          <h4 class="font-weight-bold mb-3">Marie Johnson</h4>
          <p class="font-weight-bold blue-text">Web developer</p>
          <a class="rotate-btn" @click="flipped=true">
            <mdb-icon class="pr-2" icon="redo" />Click here to rotate
          </a>
        </mdb-card-body>
      </mdb-card>
      <mdb-card class="face back" style="height: 416px;">
        <mdb-card-body>
          <h4 class="font-weight-bold">About me</h4>
          <hr />
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
          <hr />
          <ul class="list-inline py-2">
            <li class="list-inline-item">
              <a class="p-2 fa-lg fb-ic">
                <mdb-icon fab icon="facebook" />
              </a>
            </li>
            <li class="list-inline-item">
              <a class="p-2 fa-lg tw-ic">
                <mdb-icon fab icon="twitter" />
              </a>
            </li>
            <li class="list-inline-item">
              <a class="p-2 fa-lg gplus-ic">
                <mdb-icon fab icon="google-plus" />
              </a>
            </li>
            <li class="list-inline-item">
              <a class="p-2 fa-lg li-ic">
                <mdb-icon fab icon="linkedin" />
              </a>
            </li>
          </ul>
          <a class="rotate-btn" @click="flipped=false">
            <mdb-icon class="pr-2" icon="undo" />Click here to rotate back
          </a>
        </mdb-card-body>
      </mdb-card>
    </mdb-flipping-card>
  </mdb-container>
</template>
<script>
  import {
    mdbContainer,
    mdbRow,
    mdbCol,
    mdbCard,
    mdbCardImage,
    mdbCardBody,
    mdbCardTitle,
    mdbCardUp,
    mdbCardAvatar,
    mdbBtn,
    mdbView,
    mdbMask,
    mdbIcon,
    mdbFlippingCard,
    mdbAvatar,
  } from "mdbvue";
  export default {
    name: "CardAnimationsPage",
    components: {
      mdbContainer,
      mdbRow,
      mdbCol,
      mdbCard,
      mdbCardImage,
      mdbCardBody,
      mdbCardTitle,
      mdbCardUp,
      mdbCardAvatar,
      mdbBtn,
      mdbView,
      mdbMask,
      mdbIcon,
      mdbFlippingCard,
      mdbAvatar,
    },
    data() {
      return {
        flipped: false
      };
    }
  };
</script>

Card Animation - API

In this section you will find advanced information about the FlippingCard and SlidingCard components. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Flipping Card

Bootstrap flipping card is a card animation that gives an element effect of flipping to the other side upon the interaction. The Vue component is in fact a wrapper taking in two cards (holding face front and face back classes) and a flipped boolean prop responsible for rendering either side. This way you can apply your own flip-firing logic wherever you like.

API Reference: Properties

Name Type Default Description Example
tag String 'div' Sets a tag of an element's wrapper <mdb-flipping-card tag="li"/>
innerTag String 'div' Sets element's tag <mdb-flipping-card innerTag="li"/>
flipped Boolean false Cotrols which side of the card is showing <mdb-flipping-card :flipped="isFlipped"/>
innerClass String, Array '' Binds class names to inner element <mdb-flipping-card innerClass="custom-inner-class"/>
outerClass String, Array '' Binds class names to outer element <mdb-flipping-card outerClass="custom-outer-class"/>

Sliding Card

API Reference: Properties

Name Type Default Description Example
show Boolean false Controls display of an element <mdb-sliding-card :show="isShown"/>
direction String "bottom" Sets direction of the animation - available options are: top, bottom, left, right <mdb-sliding-card direction="top"/>
width Number If we're using horizontal animation (direction="left" or direction="right") we need to add width property with value in pixels in order to prevent content from wrapping. <mdb-sliding-card direction="left" :width="220" />