CSS | Propiedad de transición Propiedad

Posted on by Rudeus Greyrat

El efecto de transición se utiliza para mostrar el cambio en la propiedad de un elemento durante una duración específica. La propiedad de propiedad de transición se utiliza para especificar el nombre de la propiedad CSS para la que se producirá el efecto de transición.

Sintaxis:

transition-property: none | all | property | initial | inherit;

Valores de propiedad:

  • ninguno: este valor se utiliza para especificar que ninguna propiedad obtendrá un efecto de transición.

    Sintaxis:

    transition-property: none;

    Ejemplo: En el siguiente ejemplo, hemos especificado que ninguna de las propiedades obtendrá un efecto de transición. Por lo tanto, si nos desplazamos sobre el cuadro, los cambios en sus propiedades serán repentinos en lugar de pasar de un valor a otro durante un período específico.

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: none;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: none</h2>
        <div class="box"></div>
      </body>
    </html>

    Producción:

  • all: Todas las propiedades CSS tendrán un efecto de transición. Este es también el valor predeterminado para esta propiedad.

    Sintaxis:

    transition-property: all;

    Ejemplo: en lugar de especificar los nombres de todas las propiedades para las que necesitamos un efecto de transición, también podemos usar el valor all para la propiedad de transición. Esto nos permitirá mostrar el efecto de transición para todas las propiedades sin especificar sus nombres individualmente, lo que se puede mostrar en el siguiente ejemplo:

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: all;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: all</h2>
        <div class="box"></div>
      </body>
    </html>

    Producción:

  • propiedad: podemos especificar los nombres de las propiedades CSS para las que se aplicará el efecto de transición. También podemos especificar varias propiedades separándolas con una coma.

    Sintaxis:

    transition-property: property;

    Ejemplo: hemos especificado varias propiedades en el ejemplo siguiente para el efecto de transición (es decir, color de fondo, ancho y alto) separándolas con una coma. Por lo tanto, cuando pasamos el cursor sobre el cuadro, podemos ver las transiciones en las propiedades del cuadro.

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: background-color, width, height;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>
         transition-property: 
         background-color, width, height</h2>
        <div class="box"></div>
      </body>
    </html>

    Producción:

  • initial: se utiliza para establecer esta propiedad en su valor predeterminado. Este valor es útil cuando no conocemos el valor predeterminado para una propiedad específica.

    Sintaxis:

    transition-property: initial;

    Ejemplo: como hemos especificado el valor de la propiedad como inicial en el siguiente ejemplo, el valor predeterminado para esta propiedad (que es todo ) se asignará a la propiedad de transición . Por lo tanto, el efecto de transición ocurrirá para todas las propiedades de CSS que cambian a medida que pasamos el mouse sobre el cuadro.

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: initial;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: initial</h2>
        <div class="box"></div>
      </body>
    </html>

    Producción:

  • heredar: se utiliza para especificar que esta propiedad heredará su valor de su elemento principal.

    Sintaxis:

    transition-property: inherit;

    Ejemplo: como hemos especificado el valor de la propiedad como heredar en el siguiente ejemplo, el cuadro heredará el valor de la propiedad de transición de su propiedad. Pero en este caso, el valor de la propiedad de transición de su padre será todo (ya que es el valor predeterminado) ya que no hemos especificado el valor de su padre. Por lo tanto, se producirá un efecto de transición para todas las propiedades de CSS.

    <!DOCTYPE html>
    <html>
      <head>
        <title>CSS transition-property property</title>
        <style>
          .box{
            background-color: red;
            width: 300px;
            height: 200px;
            margin: auto;
            transition-property: inherit;
            transition-duration: 2s;
          }
      
          .box:hover{
            background-color: pink;
            width: 200px;
            height: 150px;
          }
      
          h1, h2{
            color: green;
            text-align: center;
          }
        </style>
      </head>
      
      <body>
        <h1>Geeks For Geeks</h1>
        <h2>transition-property: inherit</h2>
        <div class="box"></div>
      </body>
    </html>

    Producción:

Navegadores compatibles: los navegadores compatibles con la propiedad de propiedad de transición se enumeran a continuación:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por rituraj_jain y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *