CSS 애니메이션 애니메이션 사용에 대한 튜토리얼

어떤 프로젝트이든 프론트엔드에서 주의해야 할 것이 바로 호환성이라는 것은 누구나 다 아는 사실입니다. 오늘은 호환성 검증 문제에 대해 말씀드리겠습니다.

어떤 프론트엔드 프로젝트를 하든 반드시 주의해야 할 점은 호환성이라는 사실을 알고 있으므로 오늘은 어떤 브라우저에 호환성 확인이 필요한지 자세히 살펴보겠습니다.

많은 웹 페이지에서 이미지, 플래시 애니메이션, JavaScript를 대체할 수 있는 강력한 CSS3를 통해 다양한 애니메이션과 특수 효과를 만들 수 있다는 것을 알고 있습니다. 오늘은 CSS3

CSS3 @keyframes의 @keyframes 규칙을 소개하겠습니다. 규칙

CSS3에서 애니메이션을 만들려면 @keyframes 규칙을 배워야 합니다.

@keyframes 규칙은 애니메이션을 만드는 데 사용됩니다. @keyframes에 CSS 스타일을 지정하면 현재 스타일에서 새 스타일로 점진적으로 변경되는 애니메이션 효과를 만들 수 있습니다.

Css 애니메이션을 사용하여 배경과 위치를 변경하는 방법, 코드는 다음과 같습니다.

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 
@-o-keyframes myfirst /* Opera */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 다른 관련 내용에 주목하세요. PHP 중국어 웹사이트의 기사!

관련 읽기:

CSS3 번역 속성에 대한 자세한 소개

CSS3 배경 크기 속성에 대한 자세한 소개

CSS3 함수인rotate() 사용 방법

위 내용은 CSS 애니메이션 애니메이션 사용에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!