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