梦想之家

CSS3中调用动画

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>

如下图,其实这个圆圈是微软着边框顺时针旋转的:
2017-03-23_201323.png

您此刻的心情: