微信小程序打开红包的css_微信小程序-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