css3实现简单动画效果及以小程序为例

效果

点击按钮三角形按照一个三角形的路线移动

css动画.gif

实现思路

主要通过translate这个属性控制对应的x轴y轴的移动zuo biao

实现过程

wxml

<view class="container">
  <view class='triangle {{active?"active":""}}'></view>
  <button class='actionbotton' bindtap='action'>点击开始动画</button>
</view>

css

.container {
  position: relative;
}
//三角形
.triangle {
  width: 0rpx;
  height: 0rpx;
  position: absolute;
  border-left: 50rpx solid transparent;
  border-top: 50rpx solid transparent;
  border-right: 50rpx solid transparent;
  border-bottom: 50rpx solid red;
  margin-top: 300rpx;
}

.actionbotton {
  position: absolute;
  margin-top: 450rpx;
}
//动画定义
.active {
  animation-name: test;//名称
  animation-duration: 3s;//时间
  animation-timing-function: linear;//方式
  animation-iteration-count: 5;//次数
}

@keyframes test {
  0% {
    transform: translate(0rpx, 0rpx);
  }

  20% {
    transform: translate(-300rpx, -300rpx);
  }

  60% {
    transform: translate(300rpx, -300rpx);
  }

  100% {
    transform: translate(0rpx, 0rpx);
  }
}

js

//点击方法
action:function(){
    this.setData({
      active: !this.data.active
    })
  }