Rotar frases de texto usando animaciones CSS3

Vista prévia

Descripción

Un enfoque CSS/CSS3 puro para rotar piezas de texto una tras otra usando animaciones basadas en CSS3 como deslizamiento, fundido de entrada, voltear, empujar, y más.

Funcionamiento

Cree una frase que contenga un conjunto de frases de texto que desee rotar.

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

Crear efecto deslizante vertical.

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

Crear animación de arriba a abajo.

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

Crear efecto deslizante horizontal.

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

Crear animación de izquierda a derecha.

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

Crear fundido en la animación.

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

Crear efecto de volteo vertical.

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

Crear efecto Flip horizontal.

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

Crear efecto AntiClockWise.

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

Crear efecto a la derecha.

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

Crear efecto pop.

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

Crear efecto Push.

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