Что означает "@" в этом утверждении CSS?

Question

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

Что означают "@" и "100%"?

Answer 1

Это правила CSS3, которые были определены командой разработчиков webkit, до официального принятия в качестве части спецификации CSS3 - отсюда и включение -webkit в селектор. Символ @ указывает, что это правило CSS, а не стандартный селектор. @ -webkit-keyframes - для определения ключевых кадров для свойств анимации визуальных эффектов CSS.

Вы можете определить столько ключевых кадров, сколько вам нужно для анимации; в случае, если вы задали только последний ключевой кадр (когда 100% анимации завершены) был определен. Полный синтаксис и документация для этих правил можно найти здесь.

Например, если вы хотите, чтобы анимация начиналась медленно, а затем ускорялась, при плавном начале и окончании можно было бы установить промежуточные ключевые кадры, которые имели нелинейные шаги по степени вращения:

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

«@» объявляет At-Rule в таблице стилей.Это, безусловно, имеет особое значение, в любом случае.

«100%» относится к конечному состоянию анимации CSS, определенной правилом @keyframes, или в этом случае правилу @ -webkit-keyframes.Вы фактически должны объявить первое (0%) и конечное (100%) состояния анимации, чтобы пользовательский агент знал, когда запускать и останавливать анимацию.

Вот еще немного: At-Rules - это директивы для механизма рендеринга;они расширяют синтаксис набора правил CSS за пределы обычных блоков выбора и объявления.Правила At объявляются с помощью ключевого слова At, которое просто равно «@keyword», за которым следует инструкция At-Rules относительно используемого ключевого слова At.Пример: @charset "ISO-8859-15";

Необязательные аргументы могут следовать за ключевым словом At в зависимости от типа оператора At-Rule.Пример: @media screen {color: # 000;}, где screen - необязательный аргумент.