CSS3 动画 animation-fill-mode:forwards

html-css07

CSS3 动画 animation-fill-mode:forwards,第1张

你要出发某个事件，才能再次执行动画吧，或通过伪类，或用JS.

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title>无标题文档</title>

<style>

.test{

    display:block

    width:100px

    height:20px

    border:1px solid #ff0000

    -webkit-animation:f0 2s 0.5s 1  linear

    -webkit-animation-fill-mode:forwards

}

.test-high{

    width:500px

    -webkit-animation:f1 2s 0.5s 1  linear

    -webkit-animation-fill-mode:forwards

}

@-webkit-keyframes f0{

    0%{width:100px}

    100%{width:500px}

}

@-webkit-keyframes f1{

    0%{height:20px}

    100%{height:200px}

}

</style>

</head>

<body>

<div>

<div class="test">我会长大</div>

<button type="button" onclick="goHigher()">变高一点</button>

<script>

 function goHigher(){

  document.getElementsByClassName("test")[0].className = "test test-high"

 }

</script>

</body>

</html>

这里div.test会变宽到500px停住，当给他添加上test-high类时，会保持500px的宽度，在变高。

这可能就是你要的，关键是再下一个动画开始前将样式调整到上一个动画结束时一样。

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="../../images/page4.jfif" style="width:200rpxheight:200rpx  position:  relative"></image>

wxss文件

.aniamtion {

animation: mymove 5s infinite

/* //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 */

}

@keyframes mymove {

from {

  /* left: 0px*/

/* transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx)*/

transform: rotate3d(100,200,300,0deg)

}

to {

 /* left: 200px*/

/* transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx)*/

transform: rotate3d(200,300,400,360deg)

}

}

2、 用小程序的API来实现动画

用wx.createAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animation.step() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({

         animation:this.animation.export()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

this.animation.export() 导出动画队列。export 方法每次调用后会清掉之前的动画操作

rotate(){

this.animation.rotate(150).step() //对动画进行简单的描述

this.setData({ // 在setData({}) 导出动画数据数据给组件

         animation:this.animation.export()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

this.animation = wx.createAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

this.animation.rotate(150).step().translate(100).step()

this.setData({

animation:this.animation.export()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序2.9.0 的库可用，版本不够会报this.animate不是一个方法）

<text>pages/index7/index7.wxml</text>

<view id="container" style="height: 100pxwidth: 100pxbackground-color: blue">

container

</view>

<view class="block" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  this.animate('#container', [

    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 1.0, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  this.animate('.block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animation.css

需要做的有

从https://daneden.github.io/animate.css/下载css动画文件

把 .css 文件 改名成 .wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的app.wxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100pxwidth: 100pxbackground-color: #ccc">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

.swing{

animation: swing 5s infinite

}

具体css代码如下:

$width: 64px

$height: 64px

$dotWidth: 10px

$dotHeight: 10px

$radius: 5px

$offset: 9.37px

@function getLeft( $x ) {

@return ($width/4)*$x

}

@function getTop( $y ) {

@return ($height/4)*$y

}

@keyframes changeOpacity {

from { opacity: 1}

to { opacity: .2}

}

.q-loading {

position: fixed

top: 0

left: 0

right: 0

bottom: 0

.q-loading-overlay {

position: fixed

top: 0

left: 0

right: 0

bottom: 0

background-color: rgba(255, 255, 255, .5)

}

.q-loading-content {

position: absolute

left: 50%

top: 50%

transform: translate(-50%, -50%)

width: $width

height: $height

z-index: 2

}

.dot {

width: 10px

height: 10px

position: absolute

background-color: #0033cc

border-radius: 50% 50%

opacity: 1

animation: changeOpacity 1.04s ease infinite

}

.dot1 {

left: 0

top: 50%

margin-top: -$radius

animation-delay: 0.13s

}

.dot2 {

left: $offset

top: $offset

animation-delay: 0.26s

}

.dot3 {

left: 50%

top: 0

margin-left: -$radius

animation-delay: 0.39s

}

.dot4 {

top: $offset

right: $offset

animation-delay: 0.52s

}

.dot5 {

right: 0

top: 50%

margin-top: -$radius

animation-delay: 0.65s

}

.dot6 {

right: $offset

bottom: $offset

animation-delay: 0.78s

}

.dot7 {

bottom: 0

left: 50%

margin-left: -$radius

animation-delay: 0.91s

}

.dot8 {

bottom: $offset

left: $offset

animation-delay: 1.04s

}

}

代码使用scss定义了大圆和小圆圈的半径，不管改成多大只需要更改变量，下面样式无需改变。