简单实用的css3动画

首先，我们来归纳一下常见的css3动画属性

透明度

opacity:0; 透明度为0

左右位移,上下位移

transform: translateX(x);  定义转换，只是用 X 轴的值
transform: translateY(y); 定义转换，只是用 Y 轴的值
transform: translate(x,y); 定义 2D 转换
transform: translate3d(x,y,z); 定义 3D 转换缩放
transform: scale(x,y); 定义 2D 缩放转换
transform:scale3d(x,y,z); 定义 3D 缩放转换旋转
transform: rotate(angle); 定义 2D 旋转，在参数中规定角度
transform:rotate3d(x,y,z,angle); 定义 3D 旋转

animation 属性

animation: name duration delay iteration-count direction timing-function;
六个属性分别为： 名称，动画花费时间，动画延迟时间，次数，是否轮流反复播放，运行速度曲线。

来写一个简单的不倒翁动画吧。

html

css

.move{   
​     width: 120px; height: 200px; background: #fff; margin: 60px auto; border-radius: 45%;  border: 3px solid #000;    ​     animation:swing 0.8s 1.3s infinite alternate linear; 
  ​-webkit-animation:swing 0.8s 1.3s infinite alternate linear;   
​ transform-origin: bottom; 
  ​ -webkit-transform-origin: bottom;
}

@keyframes swing{
    ​0% {
  ​  -webkit-transform: rotate(-5deg);
    ​  transform: rotate(-5deg);  
​}  
​50% {
    ​  -webkit-transform: rotate(0);
  ​  transform: rotate(0);  
​}
  ​100% {
    ​  -webkit-transform: rotate(5deg);
    ​  transform: rotate(5deg);
    ​}
}
/* Safari and Chrome */
@-webkit-keyframes swing {
  ​0% {
    ​  -webkit-transform: rotate(-5deg);
    ​  transform: rotate(-5deg);
    ​}
  ​50% {
      ​  -webkit-transform: rotate(0);
    ​  transform: rotate(0);
    ​}
    ​100% {
      ​  -webkit-transform: rotate(5deg);
  ​  transform: rotate(5deg);
  ​}
}
简单的动画就完成了，你也可以按照这种方式定义其他的效果，比如左右移动，放大缩小等，都是大同小异的。
这样看起来是不是很简单，切图网，我们不套路，我们讲思路。授人以鱼不如授人以渔。
想要真实的商业实战的可以加一下qq:6135833
---------------------------------------------
www.qietu.com 切图网，专注于前端开发和实战培训。
培训咨询qq：6135833
前端交流群：308736107