微信小程序-css动画

一：css属性介绍

1、 animation：动画属性。详细的可查看官方APIwx.createAnimation(OBJECT)

2、 animation-deley：设置动画在启动前的延迟间隔。

3、animation-direction: 取值：alternate，alternate-reverse，normal，reverse。指定是否应该轮流反向播放动画。

4、 animation-duration: 动画指定需要多少秒或毫秒完成。

5、 animation-fill-mode: 取值：backwards，both，forwards，none。规定当动画不播放时(当动画完成时，或当动画有一个延迟未开始播放时)，要应用到元素的样式。

6、 animation-iteration-count：定义动画播放的次数。取值：infinite(永远播放)，或者一个数字。

7、 animation-name:属性为 @keyframes 动画指定名称。

8、animation-play-state:取值：

• running 动画运行
• pause 动画暂停。

9、animation-timing-function: 指定动画将如何完成一个周期，样式如下：

• linear(动画从头到尾的速度是一样的。)
• ease(动画以低速开始，然后加快，在结束前变慢。)
• ease-in(动画以低速开始)
• ease-out(动画以低速结束)
• ease-in-out(动画以低速开始结束)
• cubic-bezier(1, 0, 0, 1)(在cubic-bezier函数中设置值的方式。)
• step-end：相当于 steps(1，end)
• step-start：相当于steps(1，start)

10、transform: 形变动画，样式如下

• translate3d(x,y,z) 定义 3D 缩放转换。
• rotate3d(x,y,z,angle) 定义 3D 旋转。
• rotate（45deg）旋转.
• scale（0.5，2）水平方向缩小一半，垂直方向放大一倍,可以只写第一个。
• skew（30deg，30deg）水平方向上倾斜30度，垂直方向上倾斜30度，可以只写第一个。
• translate（50px，50px） 水平方向上移动50px，垂直方向上移动50px，可以只写第一个。
• 3D旋转
  分别使用rotateX方法、rotateY方法、rotateZ方法使元素围绕X轴、Y轴、Z轴旋转，在参数中加入角度值，角度值后面跟表示角度单位的deg文字即可，旋转方向为顺时针旋转。
• 3D缩放
  分别使用scaleX方法、scaleY方法、scaleZ方法使元素按X轴、Y轴、Z轴进行缩放，在参数中指定缩放倍率。
• 3D倾斜
  分别使用skewX方法、skewY方法使元素在X轴、Y轴上进行顺时针方向倾斜（无skewZ方法），在参数中指定倾斜的角度
• 3D移动
  分别使用translateX方法、translateY方法、translateZ方法、使元素在X轴、Y轴、Z轴方向上进行移动，在参数中加入移动距离。

二：css动画实现

1.wxml:

布局

2.wxss
（1）属性绑定：

.view {
  width: 200rpx;
  height: 200rpx;
  background-color: red;
  margin-left: 100rpx;
  margin-top: 100rpx;
  /** 第一种写法**/
  animation-name: viewlinear;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /** 第二种写法**/
  animation: viewlinear 2s linear infinite;
}

(2)动画实现:

@keyframes viewlinear {
  
  /** 第一种写法**/
  0% {
    background-color: red;
  }
  50% {
    background-color: orange;
  }
  100% {
    background-color: yellow;
  }


  /** 第二种写法**//*开始转的角度*/
  from {
    background-color: orange;
  }/*结束的角度*/

  to {
    background-color: red;
  }
}

动画效果:

效果.gif