animation-name 속성을 사용하여 애니메이션을 호출하는 방법은 무엇입니까? animation-name 속성에 대한 자세한 설명
- 云罗郡主앞으로
- 2018-11-20 16:58:173601검색
이 글의 내용은 animation-name 속성을 사용하여 애니메이션을 호출하는 방법에 관한 것입니다. animation-name 속성에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고하시면 좋겠습니다.
animation-name 속성:
CSS3에서는 @keyframes 규칙을 사용하여 정의된 애니메이션이 자동으로 실행되지 않습니다. 또한 animation-name 속성을 사용하여 애니메이션을 호출해야 애니메이션이 적용됩니다.
구문:
animation-name: 애니메이션 이름;
설명:
animation-name으로 호출되는 애니메이션 이름은 @keyframes 규칙에 의해 정의된 애니메이션 이름과 정확히 동일해야 합니다(대소문자 구분). .일관되지 않으면 애니메이션 효과가 유효하지 않습니다. 브라우저 호환성을 위해 Chrome 및 Safari 브라우저에는 -webkit- 접두사가 필요하고 Firefox 브라우저에는 -moz-가 필요합니다.
코드:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 animation-name属性</title>
<style type="text/css">
@-webkit-keyframes mycolor
{
0%{background-color:red;}
30%{background-color:blue;}
60%{background-color:yellow;}
100%{background-color:green;}
}
@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px; -webkit-transform:translateX(0);}
100%{border-radius:50px; -webkit-transform:translateX(50px);}
}
div
{
width:100px;
height:100px;
background-color:red;
}
div:hover
{
-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}
</style>
</head>
<body>
<div></div>
</body>
</html>효과는 다음과 같습니다: 
분석:
여기에서는 @keyframes 규칙을 사용하여 mycolor와 mytransform이라는 2개의 애니메이션을 정의합니다. 그러나 우리는 mytransform이라는 애니메이션을 호출하기 위해 animation-name만을 사용합니다. 따라서 mytransform이라는 애니메이션은 적용되지만 mycolor라는 애니메이션은 적용되지 않습니다.
mytransform 애니메이션에서 div 요소의 border-radius 속성 값은 0%에서 50% 사이에서 0에서 50px로 변경된 다음 border-radius 속성 값을 50%에서 100% 사이에서 변경되지 않은 상태로 유지하고 수평으로 이동합니다. 오른쪽으로 50px 이동하세요.
방법 (1):
@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;-webkit-transform:translateX（0）；}
100%{-webkit-transform:translateX（50px）；}
}방법 (2):
@-webkit-keyframes mytransform
{
0%{border-radius:0;}
50%{border-radius:50px;}
100%{-webkit-transform:translateX（50px）；}
}초심자는 종종 정의할 때마다: hover 의사 클래스 정의, 마우스가 요소 위로 움직일 때 애니메이션이 시작됩니다. 웹 페이지를 처음 열 때 애니메이션이 자동으로 실행되도록 하려면 어떻게 해야 할까요?
사실 아주 간단합니다. 마우스 포인터가 div 요소 위에 있을 때 스타일을 제거하고 스타일의 코드를 div 요소 자체의 스타일로 다시 작성하면 아래와 같은 코드가 됩니다. 그러면 애니메이션이 생성됩니다. 페이지가 열리면 즉시 시작됩니다.
div
{
width:100px;
height:100px;
background-color:red;
-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
}위는 animation-name 속성을 사용하여 애니메이션을 호출하는 방법입니다. animation-name 속성에 대한 자세한 설명을 소개합니다. CSS3 Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 참고하세요.
위 내용은 animation-name 속성을 사용하여 애니메이션을 호출하는 방법은 무엇입니까? animation-name 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!