小程序 自定义 循环 动画

本文出自：

http://blog.csdn.net/wyk304443164

小程序 animation 创建的animation 不能循环，所以我们直接使用 css的动画，真搞不懂 为啥小程序还要搞一套这种动画出来。。

<view class="bottom-container">
      <view class="view-container">
        <text>向下</text>
      </view>
    </view>

/*往下*/
    .bottom-container {
      height: ~"80rpx";
      position: relative;
      text-align: center;

      @keyframes spin {
        0% {
          opacity: .2;
          left: 0;
          top: 0;
        }
        50% {
          opacity: 1;
          left: 0;
          top: 12px;
        }
        100% {
          opacity: .2;
          left: 0;
          top: 0;
        }
      }

      .view-container {
        position: absolute;
        margin-left: calc(~"50% - 10px");
        animation: spin 2.5s ease-in-out infinite;
      }
    }

so fucking easy!