애니메이션

英 [nem]

n.명; 유명인

vt.이름 정하기; 그에 맞게 이름을 지정하세요

3인칭 단수: names 복수: names 현재 분사: naming 과거 시제: names 과거 분사: names

CSS 애니메이션 이름 속성 통사론

animation-name 속성은 어떻게 사용하나요?

animation-name 속성은 객체에 적용된 애니메이션 이름을 검색하거나 설정하는 데 사용됩니다. 기본 구문은 animation-name입니다. : 맞춤 애니메이션 이름.

기능: animation-name 속성은 @keyframes 애니메이션의 이름을 지정합니다.

구문: ​​animation-name: keyframename|none;
설명: keyframename은 선택기에 바인딩되어야 하는 키프레임의 이름을 지정합니다. none은 애니메이션 효과를 지정하지 않습니다(캐스케이드에서 애니메이션을 재정의하는 데 사용할 수 있음).​

참고: 항상 animation-duration 속성을 지정하세요. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.

CSS 애니메이션 이름 속성 예

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;

/* Safari and Chrome */
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>

<p><strong>注释:</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>

<div></div>

<p><b>注释:</b>始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。</p>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요