Código de CSS - Rotación de palabras con efecto con CSS3

Imágen de perfil

Rotación de palabras con efecto con CSS3gráfica de visualizaciones


CSS

Publicado el 02 de Marzo del 2015 por xve
1.648 visualizaciones desde el 02 de Marzo del 2015. Una media de 21 por semana
En este simple código muestro como rotar un texto de forma vertical.

Versión 1.0

Publicado el 02 de Marzo del 2015gráfica de visualizaciones de la versión: Versión 1.0
1.649 visualizaciones desde el 02 de Marzo del 2015. Una media de 21 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Este ejemplo, ha sido sacado de la web: http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/

Puedes ver un ejemplo del mismo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <style>
    .listado {font-size:2em;margin:50px 0;}
 
    .palabras{
        display: inline;
        text-indent: 10px;
    }
    .palabras span{
        position: absolute;
        opacity: 0;
        overflow: hidden;
 
        /* Definimos el tipo de animacion y la duración de la misma
          La duración de la misma es la suma de todos los tiempos de cada
          una de las palabras
         */
        -webkit-animation: rotateWord 18s linear infinite 0s;
        -ms-animation: rotateWord 18s linear infinite 0s;
        animation: rotateWord 18s linear infinite 0s;
    }
 
    /* Definimos el tipo para mostrar cada uno de los textos */
    .palabras span:nth-child(1) {
        color:#6B799D;
    }
    .palabras span:nth-child(2) {
        /* Definimos el segundo que deseamos que aparezca */
        -webkit-animation-delay: 3s;
        -ms-animation-delay: 3s;
        animation-delay: 3s;
        color:#6b969d;
    }
    .palabras span:nth-child(3) {
        -webkit-animation-delay: 6s;
        -ms-animation-delay: 6s;
        animation-delay: 6s;
        color:#6B9D7D;
    }
    .palabras span:nth-child(4) {
        -webkit-animation-delay: 9s;
        -ms-animation-delay: 9s;
        animation-delay: 9s;
        color:#8E9D6B;
    }
    .palabras span:nth-child(5) {
        -webkit-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
        color:#9D7A6B;
    }
    .palabras span:nth-child(6) {
        -webkit-animation-delay: 15s;
        -ms-animation-delay: 15s;
        animation-delay: 15s;
    }
 
    /* El estilo keyframes define el tipo de animación */
    @-webkit-keyframes rotateWord {
        0% { opacity: 0; }
        2% { opacity: 0; -webkit-transform: translateY(-30px); }
        5% { opacity: 1; -webkit-transform: translateY(0px);}
        17% { opacity: 1; -webkit-transform: translateY(0px); }
        20% { opacity: 0; -webkit-transform: translateY(30px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
    }
    @-ms-keyframes rotateWord {
        0% { opacity: 0; }
        2% { opacity: 0; -ms-transform: translateY(-30px); }
        5% { opacity: 1; -ms-transform: translateY(0px);}
        17% { opacity: 1; -ms-transform: translateY(0px); }
        20% { opacity: 0; -ms-transform: translateY(30px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
    }
    @keyframes rotateWord {
        0% { opacity: 0; }
        2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
        5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
        17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
        20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
        80% { opacity: 0; }
        100% { opacity: 0; }
    }
    </style>
</head>
 
<body>
 
<h1>Rotación de palabras con efecto con CSS3</h1>
 
<div class='listado'>
    Listado de palabras
    <div class="palabras">
        <span>Información</span>
        <span>Lectura</span>
        <span>Aprender</span>
        <span>Mejorar</span>
        <span>Soñar</span>
        <span>Improvisar</span>
    </div>
</div>
 
<p>Ejemplo sacado de : http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/</p>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (0)


No hay comentarios
 

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3060