EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Nosotros
  • Diseño de Interfaces Web
  • Blog
  • Contacto
✕
            No results See all results
            selector de atributos css
            Selector de atributos en CSS
            22/10/2019
            Transformaciones en CSS
            Transformaciones en CSS: rotar, torcer, escalar o deplazar
            24/10/2019

            Transiciones en CSS, estilos diferentes entre estados

            Transiciones en CSS

            Transiciones en CSS

            Tabla de contenidos

            • Transiciones en CSS
            • Ejercicios propuestos
            • Actividad 7.

            Transiciones en CSS

            Las transiciones en CSS nos permiten aplicar un cambio de estilo gradual a los elementos del documento HTML. Además, nos ofrecen la ventaja de poder especificar el tiempo para que se produzca la transformación entre estilos, de esta forma podríamos utilizarlas para dar un efecto de animación.

            Todos los parámetros para aplicar las transiciones se pueden establecer en una sola línea y también mediante propiedades por separado. Veamos cómo se implementa en una sola línea.

            Formato:

            transition:[propiedad a modificar] [Duración] [Tipo de animación] [Retardo]; 

            Ejemplo:

            .caja1{
               background-color: #C0392B;
               transition: background-color 1s linear;
            }
            .caja1:hover{
               background-color: #3F51B5;
            }

            Significado de las propiedades:

            [Propiedades a modificar]: algunas de las propiedades que podemos modificar utilizando transiciones son las que se muestran en la siguiente lista:

            all
            background-color
            border
            border-radius
            color
            top
            bottom
            left
            right
            box-shadow
            width
            height
            line-height
            margin
            opacity
            word-spacing
            letter-spacing
            fill
            padding
            stroke
            text-shadow
            vertical-align
            visibility
            z-index

            [Duración en segundos]: se debe especificar el número de segundos que va a durar la animación. Por ejemplo: 3s (3 segundos).

            [Tipo de animación]: esta propiedad es opcional  y sirve para indicar la velocidad de la animación. Algunas de las posibilidades son las siguientes:

            • linear: la velocidad de la animación es uniforme en todo el recorrido.
            • ease: la velocidad se acelera al inicio, luego se retarda un poco y se acelera al final de nuevo.
            • ease-in: la animación empieza lentamente y va aumentando progresivamente.
            • ease-out: la animación empieza muy rápida y va descendiendo progresivamente.
            • ease-in-out: la animación empieza y acaba lentamente, y es en la parte central del recorrido donde la velocidad es más rápida.

            [Retardo]: tiempo (en segundos) que el navegador esperará antes de poner en marcha la animación. Se especifica el número de segundos a esperar seguido de la «s» (ejemplo: 1s).

            Recuerda utilizar la extensión que te facilita la tarea de crear los prefijos para navegadores.


            Ejemplo

            Crea un contenedor de 180 píxeles de ancho y de alto, incluye un texto en su interior y aplícale un color de fondo. Realiza las siguientes transiciones cuando el usuario pase por encima del contenedor el puntero del ratón:

            • Cambia el color de fondo del contenedor.
            • Cambia el tamaño de las letras del contenedor.
            • Cambia el color de las letras del contenedor.
            • Cambia el valor del interlineado.
            • Cambia el valor de la propiedad border-radius del contenedor.
            • Cambia el valor de la sombra del contenedor.
            • Cambia la opacidad del contenedor.
            • Cambia tres propiedades más a tu elección.

            0

            Menú con transiciones:

            0

            Comprueba tu aprendizaje

            Agrega una propiedad de transición que cambie el color de fondo en 6 segundos

            ¡Bien! ¡Has fallado!

            ¿Qué tipo de animación es uniforme durante todo el recorrido?

            ¡Bien! ¡Has fallado!

            Las transiciones sólo se pueden aplicar en los colores, los márgenes y los bordes.

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 7.

            Utiliza transiciones para algunos de los botones de tu proyecto web o para otro elemento en el que te parezca adecuado el uso de transiciones.

            Compartir

            UD4. CSS Avanzado

            • 1. Tipos de diseño web
            • 2. Medios en CSS
            • 3. Media queries CSS
            • 4. Metaetiqueta viewport
            • 5. Sombras CSS
            • 6. Gradientes CSS
            • 7. Selector de atributos en CSS
            • 8. Transiciones en CSS
            • 9. Transformaciones en CSS
            • 10. Propiedad overflow
            • 11. Flexbox, modelo de caja flexible
            • 12. Centrar horizontal y verticalmente con CSS
            • 13. Preprocesadores Less y Sass
            • 14. Estilos, elementos y código para la composición de tu web
            • 15. Herramientas útiles y referencias CSS
            • 16. CSS Grid para maquetar contenido con rejillas

            Unidades

            • UD1. Planificación de interfaces gráficas
            • UD2. HTML
            • UD3. CSS básico
            • UD4. CSS avanzado
            • UD5. Imágenes, licencias y software de gestión
            • UD6. Sonido, vídeo y animaciones
            • UD7. Plantillas y frameworks de desarrollo
            • UD8. Integración de contenido interactivo
            • UD9. Diseño de webs accesibles
            • UD10. Usabilidad web
            • Metodología Scrum

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            CodePen

            codepen

            CURSOS

            • Diseño de Interfaces Web

            REDES SOCIALES

            NUESTRA MISIÓN

            Queremos que consigas tus objetivos y que tu proyecto llegue a todo el mundo de la manera más óptima. Tu éxito es nuestro deseo y pondremos en práctica toda nuestra experiencia para que lo consigas.

            Únete y recibe gratis contenido exclusivo



              © 2022 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          No results See all results