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
            Control reproducción vídeo audio JavaScript
            Control de reproducción de vídeo y audio con JavaScript
            16/11/2019
            canvas html5
            Elemento Canvas en HTML5
            17/11/2019

            Animaciones basadas en keyframes con la propiedad animation

            animaciones css3 keyframes

            Tabla de contenidos

            • 6. Animaciones con propiedad animation
            • 6.1. Propiedad animation
            • 6.2. Uso de @keyframes
            • 6.3. Ejemplos animaciones
              • 6.3.1. Rotación de forma indefinida
              • 6.3.2. Deslizar un texto por el navegador
            • Ejercicios propuestos

            En la unidad anterior vimos cómo hacer transiciones CSS3 sobre los elementos de nuestra página web. De esta forma conseguimos proporcionar a los elementos un efecto de animación sobre algunas propiedades básicas de CSS.

            6. Animaciones con propiedad animation

            En este apartado veremos cómo encadenar diferentes animaciones utilizando la propiedad animation y sus subpropiedades. Para ello, definiremos la propiedad animation sobre nuestros selectores y después definiremos nuestra secuencia de animación mediante @keyframes.

            6.1. Propiedad animation

            Para crear una animación primero añadiremos al selector la propiedad animation y utilizaremos sus subpropiedades para configurar la duración o dirección, entre otras cosas. La sintaxis es la siguiente:

            selector{
                  animation-name: identifier;
                  subproperty: value;
            }

            Las subpropiedades de animation son:

            • animation-nameEspecifica el nombre de la regla @keyframes que describe los fotogramas de la animación.
            • animation-delayTiempo de retardo entre el momento en que el elemento se carga y el comienzo de la secuencia de la animación.
            • animation-directionIndica si la animación debe retroceder hasta el fotograma de inicio al finalizar la secuencia o si debe comenzar desde el principio al llegar al final.
            • animation-durationIndica la cantidad de tiempo que la animación consume en completar su ciclo (duración).
            • animation-iteration-countEl número de veces que se repite. Podemos indicar infinite para repetir la animación indefinidamente.
            • animation-play-statePermite pausar y reanudar la secuencia de la animación.
            • animation-timing-functionIndica el ritmo de la animación, es decir, como se muestran los fotogramas de la animación, estableciendo curvas de aceleración.
            • animation-fill-modeEspecifica qué valores tendrán las propiedades después de finalizar la animación (los de antes de ejecutarla, los del último fotograma de la animación o ambos).

            6.2. Uso de @keyframes

            Una vez añadida la propiedad animation a nuestro selector, haremos uso de los @keyframes para crear animaciones completas.

            Los @keyframes son un conjunto de fotogramas clave que describen cómo se muestra cada elemento animado durante la secuencia de la animación. La sintaxis es la siguiente:

            @keyframes identifier {
              from {
                  ...
              }
              percentage {
                  ...
              }
              to {
                  ...
              }
            }
            • identifier Nombre que identifica la lista de keyframe. Debe coincidir con animation-name.
            • fromDesde (por ejemplo: desde 0%).
            • toHasta (por ejemplo hasta 100%).
            • percentage Porcentaje intermedio de las veces que va a ocurrir una animación.
            Ver descripción completa de propiedades

            6.3. Ejemplos animaciones

            Veamos mejor estos valores mediante varios ejemplos.

            6.3.1. Rotación de forma indefinida

            Vamos a hacer una animación mediante @keyframes de nuestro logo, de forma que se encuentre rotando de forma indefinida. Para ello vamos a utilizar la propiedad transform y le daremos varios valores a su rotación: crearemos una animación con tres keyframes: uno inicial que tendrá rotación de 0 grados, otro en el 50% que tendrá una rotación sobre el eje y de 180 grados y uno final que volverá a tener una rotación de 0 grados.

            Código html:

            <img class="animacionLogo" src="eniun.png">

            Código CSS:

            .animacionLogo {
                 animation-duration: 5s;
                 animation-name: animLogo;
                 animation-iteration-count: infinite;
               }
             @keyframes animLogo{
                 from {
                     -webkit-transform: rotate(0deg);
                     transform: rotateY(0deg);
                 }
                 50%{
                     -webkit-transform: rotate(180deg);
                     transform: rotateY(180deg);
                 } to {
                     -webkit-transform: rotate(360deg);
                     transform: rotateY(360deg);
                     }
             }

            Ejemplo completo en CodePen:

            0

            6.3.2. Deslizar un texto por el navegador

            Ahora haremos una animación de un párrafo que se deslizará por el navegador desde el borde derecho de la ventana:

            Código CSS:

            p {
               animation-duration: 4s;
               animation-name: animTexto;
               margin: 20px;
             }
             @keyframes animTexto {
               from {
                 margin-left: 100%;
                 width: 100%;
               }
               to {
                 margin-left: 0%;
                 width: 100%;
               }
             }

            Ejemplo completo en CodePen:

            .dark

            Ver más ejemplos de animaciones

            Comprueba tu aprendizaje

            Indica las opciones verdaderas sobre las subpropiedades de animation.

            ¡Bien! ¡Has fallado!

            La propiedad "animation" permite modificar la apariencia de los fotogramas a través de:

            ¡Bien! ¡Has fallado!

            Ejercicios propuestos

            Actividad 6

            Configura diferentes animaciones en alguno de los elementos de tu proyecto web. Por ejemplo, podrías hacer que alguno de los textos e imágenes se muevan desde la derecha de la pantalla del navegador hasta su posición base cuando se recarga la pantalla. También podrías hacer que algún elemento modifique su tamaño y su posición durante un determinado tiempo, etc.

            Compartir

            UD6. Sonido, Vídeo y animaciones

            • 1. Formatos de vídeo y conversiones
            • 2. Inserción de vídeo en HTML5
            • 3. Formatos de audio y optimizaciones
            • 4. Inserción de audio en HTML5
            • 5. Control de vídeo y audio con JavaScript
            • 6. Animaciones con propiedad animation
            • 7. Canvas en HTML5
            • 8. Animaciones en Canvas
            • 9. Referencias y recursos: sonido, vídeos y animaciones

            Diseño de Interfaces Web

            • 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