Prueba el efecto TRANSITION de CSS en tus Proyectos Web

Prueba el efecto TRANSITION de CSS en tus Proyectos Web

Prueba el efecto TRANSITION de CSS en tus Proyectos Web

Prueba el efecto TRANSITION de CSS en tus Proyectos Web

Una forma muy efectiva de darle dinamismo a tu Pagina Web en estos tiempos es aplicarle una serie de efectos a algunos elementos que tengas implementados.

En este apartado explicaremos como implementar a tu proyecto web con algunos ejemplos básicos, esta propiedad nos permite realizar una animaciones básicas de movimiento de elementos web súper interesantes, te invitamos a seguir viendo que otras propiedades explicaremos en otros ejemplos.

Sintaxis

transition: <propiedad> <duracion> <funcion-tiempo> <retraso>;

Por ejemplo:

a {
    text-decoration: none;
    color: blue;
}
a:hover {
    color: red;
}
a {
    transition: color 0.8s linear 0.2s;
}

Lo que hemos hecho es aplicar la regla color general al elemento a y hemos cambiado esta regla cuándo se pasa el ratón por encima (hover). Con la regla transition hemos definido como queremos que se haga ese cambio del color.

Sintaxis alternativa

Estos cuatro parámetros se pueden escribir también por separado:

a {
    transition-property: text-decoration;
    transition-duration: 0.8s;
    transition-timing-function: linear;
    transition-delay: 0.2s;
}

Cada parámetro es:

  1. transition-poperty: propiedad a la que se le va a aplicar el efecto de transición. Cualquier propiedad CSS es válida: width, height, color, border, etc.
  2. transition-duration: duración del efecto. Puede ser en segundos (s) o milisegundos (ms).
  3. trasition-timing-function: define la curva de velocidad a la que se produce el efecto. Puede ser:
    • ease: este es el valor por defecto. Tiene un comienzo lento, luego rápido y termina de nuevo lentamente. Es equivalente a cubic-bezier(0.25,0.1,0.25,1).
    • linear: la misma velocidad durante toda la duración de la transición. Equivalente a cubic-bezier(0,0,1,1).
    • ease-in: efecto de transición con comienzo lento. Equivalente a cubic-bezier(0.42,0,1,1).
    • ease-out: efecto de transición con comienzo rápido y final lento. Equivalente a cubic-bezier(0,0,0.58,1).
    • ease-in-out: efecto de transición con comienzo y final lento; más rápido en medio. Equivalente a cubic-bezier(0.42,0,0.58,1).
    • cubic-bezier(n,n,n,n): define tus propios valores para la curva de Bezier. Cada valor es entre 0 y 1.
    • initial: establece esta propiedad a su valor por defecto.
    • inherit: hereda esta propiedad del elemento padre.
  4. transition-delay: retraso en el comienzo de la transición. Puede ser en segundos (s) o milisegundos (ms).

transition-timing-function y transition-delay se pueden omitir. En este caso se tomará el valor ease y 0 respectivamente.

Aplicación

Resumiendo, para aplicar transition hay que seguir estos pasos:

  1. Definir el estilo básico de un elemento
  2. Definir un estilo diferente para algunas acciones, generalmente :hover:focus y similares.
  3. Definir la regla transition como se ha explicado anteriormente.

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

¿Quieres el código fuente del proyecto
Prueba el efecto TRANSITION de CSS en tus Proyectos Web?

...por favor suscríbete gratuitamente para descargarlo

SUSCRÍBIRME

Visitado 104 veces | Publicado hace 6 meses

Más códigos de programación en CSS.

Ver scripts de CSS

Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis

VER EL CURSO DE ANDROID

Programación en CSS

Ejemplos y scripts de programación para tus proyectos

Lo último que estamos programando en el curso: Lector de Códigos QR ANDROID PHP MYSQL

Últimos detalles diseño y prueba de la app Lector Market Alis

Diseño y prueba final del Lector QR

© Todos los derechos reservados | codea.app | Comunidad de programación web y desarrollo de aplicaciones móviles | Perú 2019