EJEMPLOS DE EFECTOS CSS3

Efectos de transición realizados con CSS3. Ejemplos de efectos

Todas las transciones en CSS3 se caracterizan por tener dos valores, la velocidad de la transicion, y el calculo que permite la aceleración y desaceleración de la transición.

Para realizar los ejejmplos siguientes utilizamos la siguiente transición:

TRANSICION CON AUMENTO DEL ANCHO POR LA DERECHA

Cuando movemos al raton sobre el objeto aumenta el tamaño por la derecha. Cuando sacamos el raton del objeto vuelve a su tamaño original.

Copia en la hoja de estilo

.olg-transicion1 {
margin:10px;
width:200px;
height:200px;
background:#f00;
border:1px solid #666;
-webkit-transition: all 1s ease;
.olg-transicion1:hover{
width:400px;
-webkit-transition: all 2s ease;}

Copia en la pagina html

<div class="olg-transicion1">Transicion con aumento del ancho por la derecha</div>
Transicion con aumento del ancho por la derecha

OBJETO QUE ROTA SOBRE SI MISMO

Igual que el ejemplo anterior con la variacion que modifica la altura y la anchura, ademas modifica el color en el proceso.
#divloco div {
height: 100px;
width: 100px;
border: 1px solid #f00;
margin: 10px auto;
background: #ccc;
text-align: center;
transition: all 2s ease-in-out;}
#divloco div:hover, #divloco div.hover_effect {
transform: rotate(720deg) scale(2,2);}

Copia en la pagina html

<div id="divloco"> <div class="hover">Objeto que rota sobre si mismo</div> </div>
Objeto que rota sobre si mismo

6 EFECTOS DE TRANSICION CON UN OBJETO

Para apreciar este efecto de transición debes de pasar el raton por el objeto
.caja {
margin: 20px;
width: 400px;
padding: 10px;
height: 40px;
background: #ccc;
border: 1px solid #666;
color: #333;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
-o-transition: all 3s ease;
-ms-transition: all 3s ease;
transition: all 3s ease;}
#container:hover .caja {
background:#900;
color: #fff;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-webkit-transform: translate(400px,0) rotate(5deg) skew(-15deg,0);
-moz-transform: translate(400px,0) rotate(5deg) skew(-15deg,0);
-o-transform: translate(400px,0) rotate(5deg) skew(-15deg,0);
-ms-transform: translate(400px,0) rotate(5deg) skew(-15deg,0);}
#container:hover #caja2 {
-webkit-transition: all 3s linear;
-moz-transition: all 3s linear;
-o-transition: all 3s linear;
-ms-transition: all 3s linear;
transition: all 3s linear;}
#container:hover #caja3 {
-webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
transition: all 3s ease-in;}
#container:hover #caja4 {
-webkit-transition: all 3s ease-out;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-ms-transition: all 3s ease-out;
transition: all 3s ease-out;}
#container:hover #caja5 {
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
transition: all 3s ease-in-out;}
#container:hover #caja6 {
-webkit-transition: all 3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-moz-transition: all 3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-o-transition: all 3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
-ms-transition: all 3s cubic-bezier(1.000, 0.835, 0.000, 0.945);
transition: all 3s cubic-bezier(1.000, 0.835, 0.000, 0.945);}

Copia en la pagina html

<div id="container"/div>
<div id="caja1" class="caja">Caja 1<br />transition-timing-function: none;</div>
<div id="caja2" class="caja">Caja 2<br />transition-timing-function: linear;</div>
<div id="caja3" class="caja">Caja 3<br />transition-timing-function: ease-in;</div>
<div id="caja4" class="caja">Caja 4<br />transition-timing-function: ease-out;</div>
<div id="caja5" class="caja">Caja 5<br />transition-timing-function: ease-in-out;</div>
<div id="caja6" class="caja">Caja 6<br />transition-timing-function: cubic-bezier(0,1,1,0);</div>
</div>
Caja 1
transition-timing-function: none;
Caja 2
transition-timing-function: linear;
Caja 3
transition-timing-function: ease-in;
Caja 4
transition-timing-function: ease-out;
Caja 5
transition-timing-function: ease-in-out;
Caja 6
transition-timing-function: cubic-bezier(0,1,1,0);
Fecha actualización el 2021-11-26. Fecha publicación el 2017-11-26. Categoría: css3. Autor: Oscar olg Mapa del sitio
Ejemplos de efectos CSS3