CSS3中调用动画
03/23
animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。
语法：
animation-name: none | IDENT[,none|DENT]*;
1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）；
2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。
注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。
例如：调用定义的动画“around”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
div span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
border-radius: 100%;
/*
-webkit-animation-name:around;
-moz-animation-name:around;
animation-name:around;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 1s;
*/
/*以上可以简写为*/
-webkit-animation:around 5s ease .5s;
-moz-animation:around 5s ease .5s;
animation:around 5s ease .5s;
animation-iteration-count:infinite; /*这个代表动画无限播放 也可以设置播放次数 n*/
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>如下图，其实这个圆圈是微软着边框顺时针旋转的：
版权属于：
Dcr163的博客
本文链接：
https://www.dcr163.cn/147.html（转载时请注明本文出处及文章链接）
