CSS3 애니메이션은 소프트웨어인가요?-프런트엔드 Q&A-php.cn

CSS3 애니메이션은 소프트웨어인가요?

WBOY

풀어 주다： 2022-06-23 16:02:03

원래의

1685명이 탐색했습니다.

CSS3 애니메이션은 소프트웨어가 아닙니다. CSS 애니메이션은 CSS 및 HTML 언어를 통해 요소를 점진적으로 변경하는 것입니다. CSS 애니메이션의 본질은 애니메이션 속성이 한 값에서 다른 값으로 점진적으로 변경될 수 있다는 것입니다. 값을 사용하면 animation 속성과 함께 animation 속성을 사용하여 CSS 애니메이션 효과를 얻을 수 있습니다.

CSS3 애니메이션은 소프트웨어인가요?

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css3 애니메이션은 소프트웨어가 아닙니다.

CSS는 JavaScript나 Flash를 사용하지 않고도 HTML 요소에 애니메이션을 적용할 수 있습니다! .

CSS 애니메이션이란 무엇입니까

애니메이션은 요소를 한 스타일에서 다른 스타일로 점진적으로 변경합니다.

CSS 속성을 원하는 만큼 변경할 수 있습니다.

CSS 애니메이션을 사용하려면 먼저 애니메이션에 일부 키프레임을 할당해야 합니다.

키프레임에는 특정 시간에 요소가 갖는 스타일이 포함되어 있습니다.

일부 CSS 속성은 애니메이션이 가능하므로 애니메이션 및 전환에 사용할 수 있습니다.

애니메이션 속성은 크기, 수량, 백분율, 색상과 같은 한 값에서 다른 값으로 점진적으로 변경될 수 있습니다.

@keyframes 규칙

@keyframes 규칙에 CSS 스타일을 지정하면 특정 시간에 애니메이션이 현재 스타일에서 새 스타일로 점진적으로 변경됩니다.

애니메이션이 작동하려면 애니메이션이 요소에 바인딩되어야 합니다.

아래 예제는 "example" 애니메이션을

요소에 바인딩합니다. 애니메이션은 4초 동안 지속되며

요소의 배경색은 "빨간색"에서 "노란색"으로 점차 변경됩니다.

<!DOCTYPE html>
<html>
<head>
<style> 
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>
</head>
<body>
<p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
<div></div>
<p><b>注释：</b>当动画结束后，会变回最初的样式。</p>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3 애니메이션은 소프트웨어인가요?