(/)

 Conéctate (/login) o Regístrate (/registro)

 Inicio (/)  Artículos (/articulos)  5 ejemplos de transiciones de CSS3 (/articulo/5_ejemplos_de_transiciones_de_css3_2091)

5 ejemplos de transiciones de CSS3

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y

desarrolladores web front-end crear animaciones totalmente alucinantes sin necesidad de
usar JavaScript. En este artículo, veremos 5 ejemplos impresionantes que puedes utilizar en
tus propios proyectos. ¿Preparado? ¡Pues vamos allá!

¿Qué son las transiciones de CSS?

Introducidas hace unos años con la especificación CSS3, la propiedad de transition permite
a los desarrolladores front-end cambiar sin problemas los valores de las propiedades en un
momento dado.
No ha sido hasta este mismo año 2019, que las transiciones por fin son soportadas por
todos los navegadores modernos. Si quieres utilizar transiciones en navegadores más
antiguos, posiblemente tendrás que utilizar prefijos de proveedores como -webkit-, -moz- o -
o-. Consulta la web Can I use (https://caniuse.com/#feat=css-transitions) para obtener
más información sobre compatibilidad con los distintos navegadores.
Si necesitas más información sobre las transiciones de CSS, W3 Schools tiene un artículo 
conciso que te enseñará todo lo que necesitas saber para comenzar.

Cambio de color de fondo suave

Un efecto simple, pero común en muchos sitios web modernos, es contar con un fondo que
va cambiando de color suavamente al posarse con el cursor. Comencemos con este simple
código HTML:

<div class="color">Change Color</div>

Y ahora viene la magia del CSS. Fijate en la propiedad transition de la línea 12, que anima
nuestro div al pasar el cursor.

div.color {
margin: 121px 149px;
width: 483px;
height: 298px;
background: #676470;
color: #fff;
font-family: Lato;
font-weight: 900;
font-size: 3.4em;
text-align: center;
line-height: 298px;
transition: all 0.3s ease;
}

div.color:hover {
background: #53a7ea;
}

Cambio de fondo algo más avanzado

Un ejemplo un poco más avanzado para que veas que no es tan difícil realizar animaciones
verdaderamente chulas con las transiciones de CSS3. Aquí tienes el HTML:

<div class="container">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
</div>

Y el correspondiente código CSS, donde puedes ver el uso de la transition y transform, para
animaciones más sofisticadas.


.circle {
border-radius: 50%;
left: calc(50% - 6.25em);
top: calc(50% - 12.5em);
transform-origin: 50% 12.5em;
width: 12.5em;
height: 12.5em;
position: absolute;
box-shadow: 0 1em 2em rgba(0, 0, 0, .5);
}

.one,
.three {
background: rgba(142, 92, 205, .75);
transition: background 1s ease-in;
}

.two,
.four {
background: rgba(236, 252, 100, .75);
}

.one {
transform: rotateZ(0);
}

.two {
transform: rotateZ(90deg);
}

.three {
transform: rotateZ(180deg);
}

.four {
transform: rotateZ(-90deg);
}

.circle:hover {
background: rgba(142, 92, 205, .25);
}

Botones con bordes redondeados y con color degradado

Para muestra, un botón, como se suele decir. Aquí te proponemos un botón que luce
realmente bien hecho enteramente con CSS3. El HTML es muy simple:

<a class="btn" href="#">

<span>A button!</span>
</a>

El CSS es un poco más complejo y demuestra el verdadero poder de CSS3.


body {
background: #e7e8e9;
padding: 40px;
}

.btn {
background-image: linear-gradient(to right, #006175 0%, #00a950 100%);
border-radius: 40px;
box-sizing: border-box;
color: #00a84f;
display: block;
font: 1.125rem 'Oswald', Arial, sans-serif; /*18*/
height: 80px;
letter-spacing: 1px;
margin: 0 auto;
padding: 4px;
position: relative;
text-decoration: none;
text-transform: uppercase;
width: 264px;
z-index: 2;
}

.btn:hover {
color: #fff;
}

.btn span {
align-items: center;
background: #e7e8e9;
border-radius: 40px;
display: flex;
justify-content: center;
height: 100%;
transition: background .5s ease;
width: 100%;
}

.btn:hover span {
background: transparent;
}

Diferentes transiciones para hover on / hover off

Las transiciones pueden ser diferentes para los estados hover on y hover off, como se
demuestra en el siguiente HTML...

<a id="button" href="#">Buy Now!</a>

...y el CSS:


#thing {
padding: 10px;
border-radius: 5px;

/* HOVER OFF */
-webkit-transition: padding 2s;
}

#thing:hover {
padding: 20px;
border-radius: 15px;

/* HOVER ON */
-webkit-transition: border-radius 2s;
}

Hacer hover en un elemento afecta a otro

Terminemos este resumen con un ejemplo interesante de cómo haciendo hover sobre un
elemento afecte a otro. Comencemos creando dos contenedores HTML:

<div id="box1">#box1</div>
<div id="box2">#box2</div>

Y ahora, echemos un vistazo al CSS:

#box2 {
position: absolute;
left: 120px;
background: blue;
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
#box1:hover + #box2 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left: calc(100% - 102px);
background: yellow;
}

COMPARTE ESTE ARTÍCULO

 ENVIAR A UN AMIGO

 COMPARTIR EN FACEBOOK

 COMPARTIR EN TWITTER 

 COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR SIGUIENTE ARTÍCULO

Big Data, protagonista de máxima actualidad Técnicas CSS que merece la pena destacar
(/articulo/big_data- (/articulo/tecnicas_css_que_merece_la_pena_destacar_2092)
_protagonista_de_maxima_actualidad_2089)

¡SÉ EL PRIMERO EN COMENTAR!

Conéctate (/login) o Regístrate (/registro) para dejar tu comentario.

Secciones
Artículos (/articulos)
Tutoriales y código fuente (/codigos)
Foros (/foros)
Eventos (/eventos)
Empleo (/empleo)
Lenguajes Destacados
PHP (/php)
Java (/java)
ASP (/asp)
Bases de datos (/bases-de-datos)
C (/c)
Información
Datos Legales (/datos_legales)
Política de privacidad (/politica_de_privacidad)
Publicidad (/publicidad)
Contacto
Contacte con nosotros (/contacto)
Publicidad (/publicidad)

(https://www.facebook.com/programacionencastellano) (https://twitter.com/noprog)

Diseño web y desarrollo web (https://colorvivo.com). Un proyecto de los hermanos Carrero (https://carrero.es).

Alojado en cloud privado Stackscale (https://www.stackscale.es/)

Más internet: Password (https://password.es) | Crear tu Favicon (https://getfavicon.com) | material para manualidades
(https://conideade.com)

Copyright © 1998-2019 Programación en Castellano. Todos los derechos reservados