Blogger Animations

Using  Animation to Blogger Sites for  give visitors the smooth browsing experience.

• Created with Pure CSS.
• Smooth Animation give a ultra modern experience.

3D Horyzontal Flip

.h-flip {animation: spinner 5s cubic-bezier(0.75, 0, 0, 1) infinite; width: 80px}
@keyframes spinner { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } }

v5 Blogger

Hover Rotate

.h-rotate {transition: all 0.4s cubic-bezier(.8,1.8,.75,.75)}
.h-rotate:hover{transform: rotate(-5deg) scale(1.1);}

Type Text

.v5-type{ white-space: nowrap; overflow: hidden; width: 100%; animation: type 4s steps(60, end);}
.v5-type:nth-child(2){ animation: type2 8s steps(60, end);}
@keyframes type{ from {width: 0; } }
@keyframes type2{ 0%{width: 0;} 50%{width: 0;} 100%{ width: 100; } }

This is v5 Blogger. Created with W3.CSS

Bounce Animation

.bounce { animation: bounce 2s;}
@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} }

This is v5 Blogger

Background Color

.v5-bg {background: linear-gradient(270deg, #ffffff, #daf5dc); background-size: 400% 400%; animation: animate-color 17s ease infinite; }
@keyframes animate-color { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

This is v5 Blogger

Image Fade

.fade { opacity: 1; transition: opacity .25s ease-in-out}
.fade:hover { opacity: 0.5;}