Bootstrap card animations are a set of standard illusions of motions that can be applied to the Bootstrap cards to improve the user experience. There are the these types of animation currently available.
<div class='slideanim'></div>(code-box)
/*-------------Animation----------------------*/
.slideanim {visibility:hidden;}
.slide {
animation-name: slide;
-webkit-animation-name: slide;
animation-duration: 1s;
-webkit-animation-duration: 1s;
visibility: visible;
}
@keyframes slide {
0% {
opacity: 0;
transform: translateY(70%);
}
100% {
opacity: 1;
transform: translateY(0%);
}
}
@-webkit-keyframes slide {
0% {
opacity: 0;
-webkit-transform: translateY(70%);
}
100% {
opacity: 1;
-webkit-transform: translateY(0%);
}
}
/*----------------Animation End--------------------*/(code-box)
