animation-name使用简介
1、animation-name是什么
2、animation-name使用
3、animation-name使用详解
animation-name是什么
animation-name英文意思就是【动画名称】,animation-name属性就是应用动画的名字,在使用已定义好的动画时能引用到对应的动画。
animation-name使用
使用例子:
<!DOCTYPE html>
<html>
<head>
<title>animation-name</title>
<style type="text/css">
@keyframes mymove {
from {left:0px;}
to {left:200px;}
}
div {
width:100px;
height:100px;
background:red;
position:relative;
animation-name:mymove;
animation-duration:5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果图:
animation-name使用详解
animation-name 属性值为 @keyframes 动画规定名称。
默认值 | 继承性 | 版本 | JavaScript 语法 |
---|---|---|---|
none | no | CSS3 | object.style.animationName = ‘mymove’ |
语法:
animation-name: keyframename|none;
值 | 描述 |
---|---|
keyframename | 规定需要绑定到选择器的keyframes的名称 |
none | 规定无动画效果(可以用来覆盖来自级联的动画) |