Rotating Text Phrases Using CSS3 Animations

Category: Animation , CSS & CSS3 | January 20, 2015
0 Comment
Authoramritsinghlotay
Last UpdateJanuary 20, 2015
LicenseMIT
Tags
Views675 views
OfficialGo to website
Live DemoDownload
Rotating Text Phrases Using CSS3 Animations

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;
}
}

See Also:

You Might Be Interested In:

Leave a Reply