一个简单的CSS3动画样式

作者：袖梨 2022-06-25

CSS3 动画

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

•规定动画的名称
•规定动画的时长


今天介绍的是国外的CSS3 Animation Cheat Sheet、Animate.css、magic css3 animation，初次看到几个动画效果，感觉很酷，看了一下代码，才发现原来就是这么简单的，就是使用了transform和animate属性组合来做的。下面将会详细的解释一下这个动画的一些使用和自己如何来写出一个类似的动画来。

从animate的里面我们可以了解，animate有这么几个属性要设置。

 代码如下 复制代码

 -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
 -webkit-animation-duration: 10s;/*动画持续时间*/
 -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
 -webkit-animation-delay: 2s;/*动画延迟时间*/
 -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/
 -webkit-animation-direction: alternate;/*定义动画方式*/那么我们要定义动画的滚动方式就需要设置动画名字的方式了。

设置动画的过程主要用到了keyframes。

 代码如下 复制代码
 @keyframes IDENT {
     from {
       Properties:Properties value;
     }
     Percentage {
       Properties:Properties value;
     }
     to {
       Properties:Properties value;
     }
   }

   或者全部写成百分比的形式：

 代码如下 复制代码
   @keyframes IDENT {
      0% {
         Properties:Properties value;
      }
      Percentage {
         Properties:Properties value;
      }
      100% {
         Properties:Properties value;
      }
    }

从上面的这个设置方式中，我们可以看到keyframes主要的滚动方式主要通过设置每个阶段的属性和属性值的变化来改变动画的方式的。

上面提到的三个动画查了大部分的CSS，都是通过transform来变化的。

举个例子（上下震动）

 代码如下 复制代码

.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
animated.shake {
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}

只要在需要这个动画方式的标签里面加上“animated”和“shake”，那么这个元素就有了震动的动画效果了。
至于什么样的动画方式，这就要需要发挥你的思维了，当然你也可以上面我提到的这几个动画，参考别人的做法，第二个的animation.css这个比较多的效果，而且比较常用哦。这篇文章有点水了，其实就是来推荐上面的三个动画网站。如果你有更多的类似的效果可以告诉我。这种效果自己要写，比较困难，写出来的不一定好看，建议直接用人家的代码用。

相关文章

精彩推荐