Animations

A variety of animations are available to be used when an element enters or leaves.

Classes#

ClassProperties
fadeinanimation: fadein 0.15s linear;

@keyframes fadein {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
fadeoutanimation: fadeout 0.15s linear;

@keyframes fadeout {
 0% {
  opacity: 1;
 }
 100% {
  opacity: 0;
 }
}
slidedownanimation: slidedown 0.45s linear;

@keyframes slidedown {
 0% {
  max-height: 0;
 }
 100% {
  max-height: auto;
 }
}
slideupanimation: slideup 0.45s cubic-bezier(0, 1, 0, 1);

@keyframes slideup {
 0% {
  max-height: 1000px;
 }
 100% {
  max-height: 0;
 }
}
scaleinanimation: scalein 0.15s linear;

@keyframes scalein {
 0% {
  opacity: 0;
  transform: scaleY(0.8);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: scaleY(1);
 }
}
fadeinleftanimation: fadeinleft 0.15s linear;

@keyframes fadeinleft {
 0% {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateX(0%);
 }
}
fadeoutleftanimation: fadeoutleft 0.15s linear;

@keyframes fadeoutleft {
 0% {
  opacity: 0;
  transform: translateX(0%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateX(-100%);
 }
}
fadeinrightanimation: fadeinright 0.15s linear;

@keyframes fadeinright {
 0% {
  opacity: 0;
  transform: translateX(100%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateX(0%);
 }
}
fadeoutrightanimation: fadeoutright 0.15s linear;

@keyframes fadeoutright {
 0% {
  opacity: 0;
  transform: translateX(0%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateX(100%);
 }
}
fadeinupanimation: fadeinup 0.15s linear;

@keyframes fadeinup {
 0% {
  opacity: 0;
  transform: translateY(-100%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateY(0%);
 }
}
fadeoutupanimation: fadeoutup 0.15s linear;

@keyframes fadeoutup {
 0% {
  opacity: 0;
  transform: translateY(0%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateY(-100%);
 }
}
fadeindownanimation: fadeindown 0.15s linear;

@keyframes fadeindown {
 0% {
  opacity: 0;
  transform: translateY(100%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateY(0%);
 }
}
fadeoutdownanimation: fadeoutdown 0.15s linear;

@keyframes fadeoutdown {
 0% {
  opacity: 0;
  transform: translateY(0%);
  transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
 }
 100% {
  opacity: 1;
  transform: translateY(100%);
 }
}
animate-widthanimation: animate-width 1000ms linear;

@keyframes animate-width {
 0% {
  width: 0;
 }
 100% {
  width: 100%;
 }
}
flipanimation: flip .15s linear;

@keyframes flip {
 0% {
  transform: perspective($animationPerspective) rotateX(-100deg);
 }
 100% {
  transform: perspective($animationPerspective) rotateX(0);
 }
}
flipleftanimation: flipleft .15s linear;

@keyframes flipleft {
 0% {
  transform: perspective($animationPerspective) rotateY(-100deg);
  opacity: 0;
 }
  transform: perspective($animationPerspective) rotateY(0);
  opacity: 1;
 }
}
fliprightanimation: flipright .15s linear;

@keyframes flipright {
 0% {
  transform: perspective($animationPerspective) rotateY(100deg);
  opacity: 0;
 }
  transform: perspective($animationPerspective) rotateY(0);
  opacity: 1;
 }
}
flipupanimation: flipup .15s linear;

@keyframes flipup {
 0% {
  transform: perspective($animationPerspective) rotateX(-100deg);
  opacity: 0;
 }
  transform: perspective($animationPerspective) rotateX(0);
  opacity: 1;
 }
}
zoominanimation: zoomin .15s linear;

@keyframes zoomin {
 0% {
  opacity: 0;
  transform: scale3d(0.3, 0.3, 0.3);
 }
  opacity: 1;
 }
}
zoomindownanimation: zoomindown .15s linear;

@keyframes zoomindown {
 0% {
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
 }
  opacity: 1;
  transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
 }
}
zoominleftanimation: zoominleft .15s linear;

@keyframes zoominleft {
 0% {
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
 }
  opacity: 1;
  transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
 }
}
zoomninrightanimation: zoomninright .15s linear;

@keyframes zoomninright {
 0% {
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
 }
  opacity: 1;
  transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
 }
}
zoominupanimation: zoominup .15s linear;

@keyframes zoominup {
 0% {
  opacity: 0;
  transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
 }
  opacity: 1;
  transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
 }
}

fadein#

fadein
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadein animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadein
    </div>
</div>
 

fadeout#

fadeout
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeout animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeout
    </div>
</div>
 

slidedown#

slidedown
<div class="flex flex-wrap align-items-center justify-content-center" style="min-height:100px">
    <div class="slidedown animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        slidedown
    </div>
</div>
 

slideup#

slideup
<div class="flex flex-wrap align-items-center justify-content-center" style="min-height:100px">
    <div class="slideup animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        slideup
    </div>
</div>
 

scalein#

scalein
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="scalein animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        scalein
    </div>
</div>
 

fadeinleft#

fadeinleft
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeinleft animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeinleft
    </div>
</div>
 

fadeinright#

fadeinright
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeinright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeinright
    </div>
</div>
 

fadeoutleft#

fadeoutleft
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeoutleft animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeoutleft
    </div>
</div>
 

fadeoutright#

fadeoutright
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeoutright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeoutright
    </div>
</div>
 

fadeinup#

fadeinup
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeinup animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeinup
    </div>
</div>
 

fadeoutup#

fadeoutup
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeoutup animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeoutup
    </div>
</div>
 

fadeindown#

fadeindown
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeindown animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeindown
    </div>
</div>
 

fadeoutdown#

fadeoutdown
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="fadeoutdown animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        fadeoutdown
    </div>
</div>
 

animate-width#

animate-width
<div class="flex flex-wrap align-items-center justify-content-center" style="min-height:120px">
    <div class="animate-width animation-duration-3000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        animate-width
    </div>
</div>
 

flip#

flip
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="flip animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        flip
    </div>
</div>
 

flipleft#

flipleft
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="flipleft animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        flipleft
    </div>
</div>
 

flipright#

flipright
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="flipright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        flipright
    </div>
</div>
 

flipup#

flipup
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="flipup animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        flipup
    </div>
</div>
 

zoomin#

zoomin
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="zoomin animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        zoomin
    </div>
</div>
 

zoomindown#

zoomindown
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="zoomindown animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        zoomindown
    </div>
</div>
 

zoominleft#

zoominleft
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="zoominleft animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        zoominleft
    </div>
</div>
 

zoomninright#

zoomninright
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="zoomninright animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        zoomninright
    </div>
</div>
 

zoominup#

zoominup
<div class="flex flex-wrap align-items-center justify-content-center">
    <div class="zoominup animation-duration-1000 animation-iteration-infinite flex align-items-center justify-content-center
        font-bold bg-primary border-round m-2 px-5 py-3">
        zoominup
    </div>
</div>
 
                                                  PrimeFlex 3.3.1 by PrimeTek