¿Qué significa "@" en esta declaración de CSS?

@-webkit-keyframes roll { 
    100% { -webkit-transform: rotate(360deg); } 
}

¿Qué significa "@" y "100%"?¿Qué significa "@" en esta declaración de CSS?

Fuente

2011-11-20 Leo Jiang

Duplicado de http://stackoverflow.com/questions/3453257/what-is-the-purpose-of-the-symbol-in-css –

Esto no es un duplicado directo de esa pregunta, ya que se refiere a - reglas específicas de webkit que no están documentadas allí. –

De acuerdo, esto no es un duplicado (al menos, no de la pregunta vinculada a). La pregunta vinculada se refiere a reglas '@' muy diferentes. –

Estas son reglas CSS3 que han sido definidas por el equipo de desarrollo de webkit, antes de la aceptación formal como parte de la especificación CSS3, de ahí la inclusión de -webkit en el selector. El @ indica que esta es una regla de CSS, en lugar de un selector estándar. @ -webkit-keyframes es para especificar fotogramas clave para las propiedades de animación de efecto visual de CSS.

Puede definir tantos fotogramas clave como desee para la animación; en el caso de que haya dado solo el fotograma clave final (cuando se completó el 100% de la animación) se ha definido. The full syntax and documentation for these rules can be found here.

Por ejemplo, si desea que comience la animación despacio y acelere, mientras que comienza y termina sin problemas, podría configurar fotogramas clave intermedios que tenían pasos no lineales en el grado de rotación:

@-webkit-keyframes roll { 
    25% { -webkit-transform: rotate(24deg); 
      -webkit-animation-timing-function: ease-in; 
     } 
    50% { -webkit-transform: rotate(72deg); } 
    75% { -webkit-transform: rotate(168deg); } 
    100% { -webkit-transform: rotate(360deg); 
     -webkit-animation-timing-function: ease-out; 
     } 
}

Fuente

2011-11-20 00:55:50

La "@" declara una At-Rule en la hoja de estilo. Ciertamente tiene un significado especial, en todos los casos.

El "100%" hace referencia al estado final de la animación CSS definida por la regla @keyframes, o en este caso la regla @ -webkit-keyframes. De hecho, debe declarar los primeros estados (0%) y finales (100%) de la animación para que el agente de usuario sepa cuándo comenzar y detener la animación.

Aquí hay un poco más: At-Rules son directivas para el motor de renderizado; extienden la sintaxis del conjunto de reglas CSS más allá de los bloques regulares de Selector y Declaración. At-Rules se declaran con una palabra clave At, que es simplemente "@keyword", seguida de una declaración At-Rules relativa a la palabra clave At utilizada. Ejemplo: @charset "ISO-8859-15";

Los argumentos opcionales pueden seguir a At-Keyword dependiendo del tipo de instrucción At-Rule. Ejemplo: @media pantalla {color: # 000; }, donde la pantalla es el argumento opcional.

Fuente

2011-11-20 02:11:35 albert

¿Qué significa "@" en esta declaración de CSS?

Respuesta

Cuestiones relacionadas