What does the “@” mean in this CSS statement?

Question

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

What do "@" and "100%" mean?

Answer 1

These are CSS3 rules that were defined by the webkit development team before being officially adopted as part of the CSS3 specification, hence the inclusion of -webkit in the selector. A value of @ indicates that this is a CSS rule, not a standard selector. @ -webkit-keyframes is for defining keyframes for CSS visual effect animation properties.

You can define as many key frames as you want for animation; in case you gave only the final keyframe (when 100% of the animation is complete) was determined. Full syntax and documentation for these rules can be found here.

For example, if you want the animation to start slowly and then accelerate smoothly at start-up and end, you could set intermediate keyframes with non-linear steps in degree of rotation:

 @-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; } } 

Answer 2

"@" declares an At-Rule in the stylesheet. This, of course, is of particular importance in each case.

“100%” refers to the final state of the CSS animation defined by the @keyframes rule, or in this case the @ -webkit-keyframes rule. In fact, you need to declare the first (0%) and final (100%) animation states so that the user agent knows when to start and stop the animation.

Here are a few more: At-Rules are directives for the rendering engine; they extend the syntax of the CSS rule set beyond regular selection and declaration blocks. At-Rules are declared using the At keyword, which is simply "@keyword", followed by the At-Rules statement regarding the At-Keyword used. Example: @charset "ISO-8859-15";

Additional arguments may follow the At-Keyword, depending on the type of At-Rule statement. Example: @media screen {color: # 000; }, where the screen is an optional argument.