一：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
