Código de CSS - css3: Ejemplo utilización transition-timing-function

Imágen de perfil

css3: Ejemplo utilización transition-timing-functiongráfica de visualizaciones


CSS

Publicado el 01 de Agosto del 2013 por Xavi
3.724 visualizaciones desde el 01 de Agosto del 2013. Una media de 28 por semana
Código que muestra como utilizar las distintas opciones de transition-timing-function. Se utiliza jquery.

Versión 1

Publicado el 01 de Agosto del 2013gráfica de visualizaciones de la versión: Versión 1
3.725 visualizaciones desde el 01 de Agosto del 2013. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo de dicho código 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
    <style>
    .recuadro {width:80px;height:80px;border:1px solid #ccc;margin:5px;
        transition:width 1s;
        -webkit-transition:width 1s;
        -moz-transition:width 1s;
        -o-transition:width 1s;
        -ms-transition:width 1s;
        padding:10px;
    }
    .derecha {width:300px;}
    #color1 {
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -o-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
    }
    #color2 {
        transition-timing-function: ease;
        -webkit-transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        -ms-transition-timing-function: ease;
    }
    #color3 {
        transition-timing-function: ease-in;
        -webkit-transition-timing-function: ease-in;
        -moz-transition-timing-function: ease-in;
        -o-transition-timing-function: ease-in;
        -ms-transition-timing-function: ease-in;
    }
    #color4 {
        transition-timing-function: ease-out;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        -ms-transition-timing-function: ease-out;
    }
    #color5 {
        transition-timing-function: ease-in-out;
        -webkit-transition-timing-function: ease-in-out;
        -moz-transition-timing-function: ease-in-out;
        -o-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
    }
    </style>
 
    <script>
    $(document).ready(function(){
        $(".recuadro").click(function(){
            if($(this).hasClass("derecha"))
                $(this).removeClass("derecha");
            else
                $(this).addClass("derecha");
        })
    })
    </script>
 
    <title>Ejemplo utilización transition-timing-function</title>
</head>
 
<body>
    <h1>Ejemplo utilización transition-timing-function</h1>
    <div class="recuadro" id="color1" style="background:#597326">linear</div>
    <div class="recuadro" id="color2" style="background:#d00;">ease</div>
    <div class="recuadro" id="color3" style="background:yellow;">ease-in</div>
    <div class="recuadro" id="color4" style="background:#00aaff;">ease-out</div>
    <div class="recuadro" id="color5" style="background:#808080;">ease-in-out</div>
 
    <p><a href="http://www.lawebdelprogramador.com/">http://www.lawebdelprogramador.com/</a></p>
</body>
</html>



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


No hay comentarios
 

Comentar la versión: Versión 1

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

http://lwp-l.com/s2441