EniunEniunEniunEniun
  • Inicio
  • Servicios
    • Desarrollo Web
    • Diseño Web
    • Marketing Digital
    • Social Media
    • Experiencia de usuario
  • Tutoriales
  • Blog
✕
            Sin resultados Ver todos los resultados

            Animaciones basadas en keyframes con la propiedad animation

            animaciones css3 keyframes

            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.

            Contenidos del artículo

            • 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
                • Indica las opciones verdaderas sobre las subpropiedades de animation.
                • La propiedad «animation» permite modificar la apariencia de los fotogramas a través de:
                • Actividad 6

            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

            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!

            Ejercicio propuesto

            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.

            Navegación de entradas

            ← Control de reproducción de vídeo y audio con JavaScript
            Elemento Canvas en HTML5 →

            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

            Tutoriales

            • Diseño de Interfaces
            • Usabilidad web
            • Accesibilidad web
            • HTML
            • XML
            • CSS Nivel Inicial
            • CSS Nivel Intermedio
            • CSS Nivel Avanzado
            • Bootstrap 5
            • Ver más tutoriales

            ENLACES

            • Nosotros
            • Contacto
            • Mapa del sitio
            • Blog

            TUTORIALES

            • Contenidos por bloques
            • Diseño de Interfaces Web
            • Lenguajes de Marcas y Sistemas de Gestión de Información

            SÍGUENOS

                 

            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



              © 2023 Eniun Diseño Web y Marketing Digital
              Política de privacidad y cookies
                          Sin resultados Ver todos los resultados