What does the "@" in this CSS statement mean?

Question

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

What does the "@" and "100%" mean?

Answer 1

These are CSS3 rules that have been defined by the webkit development team, in advance of formal acceptance as part of the CSS3 specification—hence the inclusion of -webkit in the selector. The @ indicates that this is a CSS rule, rather than a standard selector. @-webkit-keyframes is for specifying keyframes for CSS visual effect animation properties.

You can define as many keyframes as you like for the animation; in the case you have given only the final keyframe (when 100% of the animation is complete) has been defined. The full syntax and documentation for these rules can be found here.

For instance, if you wanted the animation to start slowly and then accelerate, while starting and ending smoothly, you could set intermediate keyframes that had non-linear steps in the 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

The "@" declares an At-Rule in the stylesheet. It most certainly has a special meaning, in every case.

The "100%" refers to the final state of the CSS Animation defined by the @keyframes rule, or in this case the @-webkit-keyframes rule. You actually have to declare the first (0%) and final (100%) states of the animation so the user agent knows when to start and stop the animation.

Here's some more: At-Rules are directives to the rendering engine; they extend the CSS Rule Set syntax beyond regular Selector and Declaration blocks. At-Rules are declared with an At-Keyword, which is simply "@keyword", followed by an At-Rules Statement relative to the At-Keyword used. Example: @charset "ISO-8859-15";

Optional arguments can follow the At-Keyword depending on the At-Rule Statement type. Example: @media screen{ color:#000; }, where screen is the optional argument.