CSS3 애니메이션 이름 속성
번역 결과：
애니메이션
인스턴스 실행 »
英 [nem]
n.명; 유명인 vt.이름 정하기; 그에 맞게 이름을 지정하세요 3인칭 단수: names 복수: names 현재 분사: naming 과거 시제: names 과거 분사: namesCSS3 애니메이션 이름 속성통사론
기능: animation-name 속성은 @keyframes 애니메이션의 이름을 지정합니다.
구문: animation-name: keyframename|none;
설명: keyframename은 선택기에 바인딩되어야 하는 키프레임의 이름을 지정합니다. none은 애니메이션 효과를 지정하지 않습니다(캐스케이드에서 애니메이션을 재정의하는 데 사용할 수 있음).
참고: 항상 animation-duration 속성을 지정하세요. 그렇지 않으면 지속 시간이 0이 되고 애니메이션이 재생되지 않습니다.
css3 animation-name 속성은 객체에 적용된 애니메이션 이름을 검색하거나 설정하는 데 사용됩니다. 애니메이션 이름은 @keyframes로 정의되므로 @keyframes와 함께 사용해야 합니다. 속성 값이 여러 개인 경우 쉼표로 구분할 수 있습니다
CSS3 애니메이션 이름 속성예
<!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>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요