微信小程序中动画的使用

1：动画的使用，用keyframes来实现，示例代码如下：

例一：

//如果要对left，right，top,bottom设置动画的话，记得设置position，因为默认position是static，static是不支持left，right，top,bottom操作的。

.c {
  animation: mymove 5s infinite;//infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。
}

@keyframes mymove {
  from {
    left: 0px;
  }

  to {
    left: 200px;
  }
}

例二：rotate和skew的参数单位是度数所以要用deg，而translate的单位可以是px，也可以是rpx。

.c {
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    transform: rotate(7deg) skew(50deg) translate(30rpx, 30rpx);
  }

  to {
    transform: rotate(700deg) skew(5deg) translate(100rpx, 100rpx);
  }
}

例三：

.

.c {
  animation: mymove 2s infinite;
}

@keyframes mymove {
  from {
    transform: rotate3d(100,200,300,0deg)
  }

  to {
    transform: rotate3d(200,300,400,360deg)
  }
}

具体的方法和参数如下：

translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。

如果想查看方法的具体效果的话，可以查看如下网址

参考网址：

http://www.w3school.com.cn/cssref/pr_transform.asp
http://www.runoob.com/cssref/css3-pr-transform.html

例四：animation-timing-function属性(规定动画的速度曲线)的用法：

.c {
  animation: mymove 5s infinite;
  animation-timing-function: ease-in-out;
}

@keyframes mymove {
  from {
    transform: translateX(0rpx)
  }

  to {
    transform: translateX(500rpx)
  }
}

animation-timing-function的具体属性值如下：

linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

参考网址：

http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp

两个学习css所有属性的网址：

http://www.w3school.com.cn/cssref/index.asp
http://www.runoob.com/cssref/css3-pr-animation-timing-function.html