Author: | amritsinghlotay |
---|---|
Views Total: | 624 views |
Official Page: | Go to website |
Last Update: | January 20, 2015 |
License: | MIT |
Preview:

Description:
A pure CSS/CSS3 approach to rotate pieces of text one after the other using CSS3 based animations such as sliding, fade in, flip, push, and more.
How to use it:
Create a sentence containing a set of text phrases you want to rotate.
<h2 class="sentence">Janie is a lovely girl and she is very <div class="Animation-Type"> <span>Amazing.</span> <span>Beautiful.</span> <span>Cute.</span> <span>Delightful.</span> <span>Emotional.</span> </div> </h2>
Create vertical sliding effect.
.slidingVertical { display: inline; text-indent: 8px; } .slidingVertical span { animation: topToBottom 12.5s linear infinite 0s; -ms-animation: topToBottom 12.5s linear infinite 0s; -webkit-animation: topToBottom 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .slidingVertical span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .slidingVertical span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .slidingVertical span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .slidingVertical span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; }
Create top to bottom animation.
@-moz-keyframes topToBottom { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(-50px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes topToBottom { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(-50px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes topToBottom { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(-50px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(50px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create horizontal sliding effect.
.slidingHorizontal { display: inline; text-indent: 8px; } .slidingHorizontal span { animation: leftToRight 12.5s linear infinite 0s; -ms-animation: leftToRight 12.5s linear infinite 0s; -webkit-animation: leftToRight 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .slidingHorizontal span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .slidingHorizontal span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .slidingHorizontal span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .slidingHorizontal span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; }
Create left to right animation.
@-moz-keyframes leftToRight { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateX(-50px); } 10% { opacity: 1; -moz-transform: translateX(0px); } 25% { opacity: 1; -moz-transform: translateX(0px); } 30% { opacity: 0; -moz-transform: translateX(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes leftToRight { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateX(-50px); } 10% { opacity: 1; -webkit-transform: translateX(0px); } 25% { opacity: 1; -webkit-transform: translateX(0px); } 30% { opacity: 0; -webkit-transform: translateX(50px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes leftToRight { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateX(-50px); } 10% { opacity: 1; -ms-transform: translateX(0px); } 25% { opacity: 1; -ms-transform: translateX(0px); } 30% { opacity: 0; -ms-transform: translateX(50px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create fade in animation.
.fadeIn { display: inline; text-indent: 8px; } .fadeIn span { animation: fadeEffect 12.5s linear infinite 0s; -ms-animation: fadeEffect 12.5s linear infinite 0s; -webkit-animation: fadeEffect 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .fadeIn span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .fadeIn span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .fadeIn span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .fadeIn span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*FadeIn Animation*/ @-moz-keyframes fadeEffect { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: translateY(0px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes fadeEffect { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: translateY(0px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes fadeEffect { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: translateY(0px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create vertical flip effect.
.verticalFlip { display: inline; text-indent: 8px; } .verticalFlip span { animation: vertical 12.5s linear infinite 0s; -ms-animation: vertical 12.5s linear infinite 0s; -webkit-animation: vertical 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .verticalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .verticalFlip span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .verticalFlip span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .verticalFlip span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Vertical Flip Animation*/ @-moz-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateX(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes vertical { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateX(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create horizontal flip effect.
.horizontalFlip { display: inline; text-indent: 8px; } .horizontalFlip span { animation: horizontal 12.5s linear infinite 0s; -ms-animation: horizontal 12.5s linear infinite 0s; -webkit-animation: horizontal 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .horizontalFlip span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .horizontalFlip span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .horizontalFlip span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .horizontalFlip span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Horizontal Flip Animation*/ @-moz-keyframes horizontal { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateY(180deg); } 10% { opacity: 1; -moz-transform: translateX(0px); } 25% { opacity: 1; -moz-transform: translateX(0px); } 30% { opacity: 0; -moz-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes horizontal { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotateY(180deg); } 10% { opacity: 1; -webkit-transform: translateX(0px); } 25% { opacity: 1; -webkit-transform: translateX(0px); } 30% { opacity: 0; -webkit-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes horizontal { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotateY(180deg); } 10% { opacity: 1; -ms-transform: translateX(0px); } 25% { opacity: 1; -ms-transform: translateX(0px); } 30% { opacity: 0; -ms-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create AntiClockWise effect.
.antiClock { display: inline; text-indent: 8px; } .antiClock span { animation: anti 12.5s linear infinite 0s; -ms-animation: anti 12.5s linear infinite 0s; -webkit-animation: anti 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .antiClock span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .antiClock span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .antiClock span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .antiClock span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*AntiClockWise Effect Animation*/ @-moz-keyframes anti { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotateX(180deg); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes anti { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotate(180deg); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes anti { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotate(180deg); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create ClockWise effect.
.clockWise { display: inline; text-indent: 8px; } .clockWise span { animation: clock 12.5s linear infinite 0s; -ms-animation: clock 12.5s linear infinite 0s; -webkit-animation: clock 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .clockWise span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .clockWise span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .clockWise span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .clockWise span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*ClockWise Effect Animation*/ @-moz-keyframes clock { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotate(-180deg); } 10% { opacity: 1; -moz-transform: translateX(0px); } 25% { opacity: 1; -moz-transform: translateX(0px); } 30% { opacity: 0; -moz-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes clock { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotate(-180deg); } 10% { opacity: 1; -webkit-transform: translateX(0px); } 25% { opacity: 1; -webkit-transform: translateX(0px); } 30% { opacity: 0; -webkit-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes clock { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotate(-180deg); } 10% { opacity: 1; -ms-transform: translateX(0px); } 25% { opacity: 1; -ms-transform: translateX(0px); } 30% { opacity: 0; -ms-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create pop effect.
.popEffect { display: inline; text-indent: 8px; } .popEffect span { animation: pop 12.5s linear infinite 0s; -ms-animation: pop 12.5s linear infinite 0s; -webkit-animation: pop 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .popEffect span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .popEffect span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .popEffect span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .popEffect span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Pop Effect Animation*/ @-moz-keyframes pop { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } 10% { opacity: 1; -moz-transform: translateY(0px); } 25% { opacity: 1; -moz-transform: translateY(0px); } 30% { opacity: 0; -moz-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes pop { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } 10% { opacity: 1; -webkit-transform: translateY(0px); } 25% { opacity: 1; -webkit-transform: translateY(0px); } 30% { opacity: 0; -webkit-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes pop { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotate(0deg) scale(0.10) skew(0deg) translate(0px); } 10% { opacity: 1; -ms-transform: translateY(0px); } 25% { opacity: 1; -ms-transform: translateY(0px); } 30% { opacity: 0; -ms-transform: translateY(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }
Create push effect.
.pushEffect { display: inline; text-indent: 8px; } .pushEffect span { animation: push 12.5s linear infinite 0s; -ms-animation: push 12.5s linear infinite 0s; -webkit-animation: push 12.5s linear infinite 0s; color: #FC6; opacity: 0; overflow: hidden; position: absolute; } .pushEffect span:nth-child(2) { animation-delay: 2.5s; -ms-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; } .pushEffect span:nth-child(3) { animation-delay: 5s; -ms-animation-delay: 5s; -webkit-animation-delay: 5s; } .pushEffect span:nth-child(4) { animation-delay: 7.5s; -ms-animation-delay: 7.5s; -webkit-animation-delay: 7.5s; } .pushEffect span:nth-child(5) { animation-delay: 10s; -ms-animation-delay: 10s; -webkit-animation-delay: 10s; } /*Push Effect Animation*/ @-moz-keyframes push { 0% { opacity: 0; } 5% { opacity: 0; -moz-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); } 10% { opacity: 1; -moz-transform: translateX(0px); } 25% { opacity: 1; -moz-transform: translateX(0px); } 30% { opacity: 0; -moz-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-webkit-keyframes push { 0% { opacity: 0; } 5% { opacity: 0; -webkit-transform:rotate(0deg) scale(2) skew(0deg) translate(0px); } 10% { opacity: 1; -webkit-transform: translateX(0px); } 25% { opacity: 1; -webkit-transform: translateX(0px); } 30% { opacity: 0; -webkit-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes push { 0% { opacity: 0; } 5% { opacity: 0; -ms-transform: rotate(0deg) scale(2) skew(0deg) translate(0px); } 10% { opacity: 1; -ms-transform: translateX(0px); } 25% { opacity: 1; -ms-transform: translateX(0px); } 30% { opacity: 0; -ms-transform: translateX(0px); } 80% { opacity: 0; } 100% { opacity: 0; } }