FSCSS 애니메이션 예

이 예제는 FSCS를 사용한 간결한 애니메이션 기술을 보여줍니다. 표준 CSS 애니메이션을 FSCSS 접근법과 비교해 봅시다

표준 CSS 애니메이션 : html은 간단합니다 :

CSS는

를 사용하여 애니메이션을 정의합니다

이것은 및 모두가 빨간색, 제로 크기의 정사각형에서 파란색, 150px 정사각형으로 전환되는 애니메이션을 만듭니다. FSCSS 애니메이션 : FSCSS는보다 컴팩트 한 구문을 제공합니다. FSCSS에 해당하는 것은 다음과 같습니다

구문은 선언을 캡슐화하여 및 에 적용합니다. 는 동시에 및

<code class="language-html"><h1></h1>
<div></div></code>

속성을 ​​모두 설정하기위한 속기입니다. 코드 펜 예 :

제공된 CodePen 링크 (@keyframes)는 애니메이션의 효과를 시각적으로 보여줍니다. 이를 통해 애니메이션을 작동하고 FSCSS 코드의 간결성을 비교할 수 있습니다. 애니메이션은 빨간색과 파란색 사각형 사이의 부드러운 전환을 보여줍니다.

위 내용은 FSCSS 애니메이션 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!