이 CSS 문구의 "@"은 무엇을 의미합니까?

Question

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

"@"과 "100 %"는 무엇을 의미합니까?

Answer 1

CSS3 사양의 일부로 정식 승인을 받기 전에 웹킷 개발 팀에서 정의한 CSS3 규칙입니다. 따라서 선택 도구에 -webkit이 포함됩니다. @는 표준 선택기가 아니라 CSS 규칙임을 나타냅니다. @ -webkit-keyframes는 CSS 시각 효과 애니메이션 속성에 키 프레임을 지정하기위한 것입니다.

애니메이션에 대해 원하는만큼의 키 프레임을 정의 할 수 있습니다. 최종 키 프레임 만 제공 한 경우 (애니메이션의 100 %가 완료된 경우)가 정의되었습니다. 예를 들어 The full syntax and documentation for these rules can be found here.

, 당신은 천천히 시작하고 시작하고 원활하게 종료하는 동안 회전의 정도에 비선형 단계 한 중간 키 프레임을 설정할 수 있습니다, 가속 애니메이션을 원한다면 :

@-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 %"는 @keyframes 규칙 또는이 경우 @ -webkit-keyframes 규칙에 의해 정의 된 CSS 애니메이션의 최종 상태를 나타냅니다. 애니메이션의 시작 (0 %) 및 최종 (100 %) 상태를 실제로 선언해야하므로 사용자 에이전트는 애니메이션을 시작하고 중지 할시기를 알고 있습니다.

다음은 좀 더 자세히 설명되어 있습니다. At-Rules는 렌더링 엔진에 대한 지시어입니다. CSS 규칙 집합 구문을 일반 Selector 및 Declaration 블록 이상으로 확장합니다. At-Rules는 At-Keyword (단순히 "@ 키워드")로 선언 된 다음 사용 된 At-Rules 문에 대한 At-Rules 문으로 선언됩니다. 예 : @charset "ISO-8859-15";

선택적 인수는 At-Rule 문 유형에 따라 At-Keyword 뒤에 올 수 있습니다. 예 : @media 화면 {color : # 000; }, screen은 선택적 인수입니다.