animation特效

在小程序中的使用：

<view class='test1'>
  <image src='/images/light.png'></image>
</view>
<!--星星的缩放效果-->
<view class='test2'>
  <image src='/images/star.png'></image>
</view>

<!--转动效果-->
<view class='test3'>
  <image src='/images/cross.png'></image>
</view>
<!--望远镜-->
<view class='test4'>
  <image src='/images/telescope.png'></image>
</view>

　　

.test1{
  width: 160rpx;
  height: 160rpx;
  background-color: #188eee;
}
.test1 image{
  width: 160rpx;
  height: 160rpx;
  animation: light 1.5s infinite;
}
@keyframes light{
  from{
    transform: rotate(0deg);
  }
  80%,to{
    transform: rotate(360deg);
  }
}


/*星星特效：*/
.test2{
  width: 100rpx;
  height: 100rpx;
}
.test2 image{
  width: 100rpx;
  height: 100rpx;
  animation: star .5s linear infinite alternate
}

@keyframes star{
  form{
    transform: scale(1);
  }
  to{
    transform: scale(.5);
  }
}
/*转动效果：*/
.test3{
  width: 100rpx;
  height: 100rpx;
}
.test3 image{
  width: 100rpx;
  height: 100rpx;
  animation: cross 1s linear infinite;
}
@keyframes cross{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}
.test4{
  width: 500px;
  height: 500px;
  text-align: center
}
.test4 image{
   width: 96px;
   height: 221px;
   animation: eyes 3.2s infinite;
}
@keyframes eyes{
  from,90%,to{
    transform: rotate(80deg)
  }
  40%,50%{
    transform: rotate(-60deg)
  }
}