{"id":263264,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/haga-que-sus-paginas-web-cobren-vida-con-animaciones-y-transiciones-css\/"},"modified":"2023-08-13T09:32:00","modified_gmt":"2023-08-13T06:32:00","slug":"haga-que-sus-paginas-web-cobren-vida-con-animaciones-y-transiciones-css","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/haga-que-sus-paginas-web-cobren-vida-con-animaciones-y-transiciones-css\/","title":{"rendered":"Haga que sus p\u00e1ginas web cobren vida con animaciones y transiciones CSS"},"content":{"rendered":"

\n Los dise\u00f1os de sitios web evolucionan constantemente. Desde un dise\u00f1o receptivo, una hermosa tipograf\u00eda, esquemas de codificaci\u00f3n de colores perfectos e ilustraciones, los creadores de sitios web presentan nuevas ideas y dise\u00f1os todos los d\u00edas.\n<\/p>\n

\n Los usuarios de hoy en d\u00eda tienen grandes expectativas de las interfaces de usuario debido al contenido de alta calidad disponible en Internet. A medida que las interfaces de los sitios web evolucionan, tambi\u00e9n lo hace la tecnolog\u00eda detr\u00e1s de ellas. Un componente importante responsable de mejorar la interfaz del sitio web es CSS<\/strong>.\n<\/p>\n

\n CSS u hojas de estilo en cascada son responsables de hacer que los sitios sean mucho m\u00e1s interactivos al definir su estilo, dise\u00f1o y dise\u00f1o. El \u00faltimo est\u00e1ndar para CSS, es decir, CSS3, ha introducido el concepto de animaciones<\/strong> y transformaciones<\/strong> que mejoran la experiencia del usuario al agregar profundidad adicional a la interfaz de usuario. Con las animaciones y transiciones CSS, puede contar historias, crear efectos lujosos y hacer que la interacci\u00f3n del usuario con su sitio web sea mucho m\u00e1s efectiva y significativa.\n<\/p>\n

\n Una animaci\u00f3n es solo una simulaci\u00f3n de movimiento que se crea al mostrar una serie de objetos como im\u00e1genes, uno tras otro. La transici\u00f3n, por otro lado, es b\u00e1sicamente un proceso en el que un objeto cambia de un estado a otro. Pero, cuando hablamos de animaciones web, hay b\u00e1sicamente tres tipos: animaciones CSS<\/strong> o animaciones de fotogramas clave, transiciones CSS<\/strong> y animaciones JavaScript<\/strong>.\n<\/p>\n

\n Animaciones CSS\n<\/p>\n

\n Para crear animaciones en CSS, necesitamos cambiar las propiedades CSS de un elemento, como una imagen o un texto, durante un per\u00edodo de tiempo determinado. Podemos cambiar las propiedades de los elementos tantas veces como queramos y tambi\u00e9n podemos establecer la duraci\u00f3n de la animaci\u00f3n.\n<\/p>\n

\n Especificaci\u00f3n de @fotogramas clave
\n<\/h5>\n

\n Las animaciones CSS se definen poco con fotogramas clave. Estos fotogramas clave son los puntos intermedios de la animaci\u00f3n. Todas las animaciones CSS se especifican bajo la regla @keyframes. Estos fotogramas clave especifican lo que sucede con el elemento en un momento particular, es decir,\n<\/p>\n

    \n
  • qu\u00e9 propiedades est\u00e1n cambiando\n <\/li>\n
  • cuando el elemento anima\n <\/li>\n
  • c\u00f3mo se anima el elemento\n <\/li>\n<\/ul>\n

    \n Puede definir su propio fotograma clave como:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Aqu\u00ed ‘hasta' y ‘desde' especifican el inicio y el final de la animaci\u00f3n. Tambi\u00e9n podemos especificar animaciones para momentos intermedios de tiempo entre el inicio y el final as\u00ed:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Aqu\u00ed 0% representa el inicio de la animaci\u00f3n, 100% representa el final de la animaci\u00f3n y 50% significa el cambio entre el inicio y el final. Pero, \u00bfc\u00f3mo le decimos al navegador cu\u00e1nto tiempo debe durar la animaci\u00f3n? Hacemos esto con la ayuda de ciertas propiedades de animaci\u00f3n<\/strong>. Estas propiedades de animaci\u00f3n est\u00e1n asociadas con el elemento a animar. Por ejemplo:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Aqu\u00ed el elemento podr\u00eda ser cualquier etiqueta HTML como div, span, img, p, etc. y style_property<\/code>es cualquier propiedad de estilo CSS como background_color, ancho, alto, etc. Veamos ahora algunas propiedades de animaci\u00f3n en detalle.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: los fotogramas clave se utilizan para especificar el c\u00f3digo de animaci\u00f3n como se explic\u00f3 anteriormente.\n  <\/li>\n
    2. \n    animation-name<\/strong>: El nombre especificado con @keyframes es el nombre de la animaci\u00f3n. Este nombre se utiliza para hacer referencia a los fotogramas clave con el elemento que se va a animar.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: Se utiliza para especificar el tiempo de duraci\u00f3n de la animaci\u00f3n en segundos o milisegundos. Por ejemplo, si lo configuramos en 5 segundos, la animaci\u00f3n se ejecutar\u00e1 solo durante 5 segundos. Si no configuramos esta propiedad, la animaci\u00f3n no se ejecutar\u00e1 en absoluto ya que su valor predeterminado es 0.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: podemos retrasar el inicio de la animaci\u00f3n especificando el tiempo de retraso de la animaci\u00f3n. Por ejemplo, si desea iniciar la animaci\u00f3n 5 segundos despu\u00e9s de que la p\u00e1gina se cargue en el navegador, simplemente configure el retraso de la animaci\u00f3n en 5 segundos.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Podemos decirle al navegador si una animaci\u00f3n se mueve en direcci\u00f3n contraria o ciclos alternos con esta propiedad. Por ejemplo, si desea que la animaci\u00f3n se ejecute de principio a fin, establezca el valor de la duraci\u00f3n de la animaci\u00f3n en ‘normal'. Si desea que se ejecute de principio a fin, simplemente establezca el valor en ‘reversa'.\n  <\/li>\n
    6. \n    modo de relleno de animaci\u00f3n<\/strong>: podemos especificar el estilo del elemento cuando la animaci\u00f3n no se reproduce con este modo, es decir, cuando la animaci\u00f3n se retrasa o finaliza, entonces cu\u00e1l deber\u00eda ser el estilo del elemento.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: esta propiedad representa el n\u00famero de veces que se puede reproducir una animaci\u00f3n. Por ejemplo, si desea reproducir la animaci\u00f3n una vez, config\u00farelo en 1, o si desea que la animaci\u00f3n se reproduzca para siempre, simplemente config\u00farelo en ‘infinito'.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: esta propiedad se utiliza para especificar la curva de velocidad de la animaci\u00f3n como lineal, aceleraci\u00f3n o desaceleraci\u00f3n.\n  <\/li>\n
    9. \n    Animaci\u00f3n<\/strong>: es la propiedad abreviada para establecer todas las propiedades de animaci\u00f3n.\n  <\/li>\n<\/ol>\n
      \n  Por ejemplo, puede animar un objeto que rebota con el siguiente fragmento de c\u00f3digo. Observe c\u00f3mo se ha utilizado aqu\u00ed la notaci\u00f3n abreviada para la animaci\u00f3n.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  Transiciones
      \n<\/h3>\n
      \n  Las transiciones CSS se aplican a las propiedades de los elementos durante un cierto per\u00edodo de tiempo en funci\u00f3n de ciertas funciones de temporizaci\u00f3n,<\/strong> tambi\u00e9n conocidas como funciones de aceleraci\u00f3n. Por funci\u00f3n de temporizaci\u00f3n, nos referimos a una funci\u00f3n que cambiar\u00e1 las propiedades de los elementos de un estado a otro, como progresi\u00f3n lineal, aceleraci\u00f3n o desaceleraci\u00f3n. Es posible que haya notado que una imagen se desliza o se transforma en otra imagen al pasar el mouse por encima o se reproduce un sonido al hacer clic con el mouse. Todos estos son efectos de transici\u00f3n que pueden hacer que un sitio web sea interactivo.\n<\/p>\n
      \n  Las funciones<\/strong> de aceleraci\u00f3n son importantes para crear transiciones. Especifican c\u00f3mo cambiar\u00e1n las propiedades. Tambi\u00e9n pueden alterar la velocidad a la que cambia el valor de las propiedades desde el punto de inicio hasta el punto final de una transici\u00f3n. Puede aplicar transiciones de la siguiente manera:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Aqu\u00ed el elemento especifica el elemento HTML que desea transformar como div, H1, img, etc. style_property es el estilo CSS aplicado en ese elemento. Veamos ahora algunas propiedades de transici\u00f3n<\/strong> :\n<\/p>\n