小程序实现图片上下跳动,图片翻转

上下跳动
wxml:

 <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image>

wxss:

.topImage{
    
    
  animation: image 1.5s infinite; 
}
@keyframes image {
    
    
  0% {
    
    
      transform: translate(0px, 0px);
  }
  50% {
    
    
      transform: translate(0px, -9px);
  }
  100% {
    
    
      transform: translate(0px, 0px);
  }
}

左右反转
wxml:

 <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image>

.topImage{
    
    
  -webkit-animation: transform-5 1.5s ease 500ms alternate none 1;
    animation: transform-5 1.5s ease 500ms alternate none 1;
}
@-webkit-keyframes transform-5 {
    
     
	from{
    
       
		-webkit-transform:perspective(400px) rotateY(91deg);
		transform:perspective(400px) rotateY(91deg);
	} 
    to{
    
    
    	-webkit-transform:perspective(400px) rotateY(0deg);
    	transform:perspective(400px) rotateY(0deg);
    } 
}
@keyframes transform-5 {
    
     
	from{
    
    
		-webkit-transform:perspective(400px) rotateY(91deg);
		transform:perspective(400px) rotateY(91deg);
	} 
    to{
    
    
    	-webkit-transform:perspective(400px) rotateY(0deg);
    	transform:perspective(400px) rotateY(0deg);
    } 
}