少啰嗦，看效果

洗牌效果：先全面展开，然后合起来，最后再次展开。

代码

布局代码

<view class="card">
      <view wx:for="{{[0,1,2,3,4,5,6,7,8]}}" wx:key="index"
        data-index="{{index+1}}"
        class="currin  {{'cinton'+(index+1)}}">
        <text class="word">...</text>
      </view>
    </view>

样式代码

.card {
  width: 690rpx;
  height: 835rpx;
  margin-left: 30rpx;
  margin-top: -10rpx;
  padding: 40rpx 10rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  background-image: url(https://7072-pro-0hm6x-1303088679.tcb.qcloud.la/images/random_bg.png);
  background-size: 100% 100%;
  z-index: 1;
}

.currin {
  margin: 5rpx 5rpx;
  width: 190rpx;
  height: 240rpx;
  float: left;
  background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
  color: #fff;
  text-align: center;
  line-height: 240rpx;
  border-radius: 10rpx;
  position: relative;
}

.cinton1 {
  animation: cinton1 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton1 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 300rpx;
    left: 230rpx;
  }
}

.cinton2 {
  animation: cinton2 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton2 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 300rpx;
    left: 0rpx;
  }
}

.cinton3 {
  animation: cinton3 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton3 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 300rpx;
    left: -230rpx;
  }
}

.cinton4 {
  animation: cinton4 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton4 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 0rpx;
    left: 230rpx;
  }
}

.cinton6 {
  animation: cinton6 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton6 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: 0rpx;
    left: -230rpx;
  }
}

.cinton7 {
  animation: cinton7 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton7 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: -300rpx;
    left: 230rpx;
  }
}

.cinton8 {
  animation: cinton8 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton8 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: -300rpx;
    left: 0rpx;
  }
}

.cinton9 {
  animation: cinton9 alternate linear 2 1s;
}

[@keyframes](/user/keyframes) cinton9 {
  from {
    top: 0;
    left: 0;
  }

  to {
    top: -300rpx;
    left: -230rpx;
  }
}