css动画

<template>
    <view class="content">
        <view class="water">
            <view class="water_1">WATER</view>
        </view>
        <view class="water">
            <view class="text-clip" data-text="Hello World"></view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style scoped>
    .content{
        width: 100%;
    }
    .water{
        width: 50%;
        /* font-size: 3em; */
        margin: auto;
        /* border: 1px #999999 solid; */
    }
    .water_1{
       width: 100%;
       font-size: 70px;
       /* font-size: 10em; */
       margin: auto;
       color: #999999;
      /* color: rgba(255,255,255,.1); */
       /* background-image: url(../../static/logo.png) repeat-x; */
       /* -webkit-background-clip:text; */
       
      background-image: linear-gradient(to right, transparent, #999999);
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
         /* css动画引入时间12s*/
       animation: animate 12s linear;
       
       /* -webkit-background-clip:text; */
       /* color: rgba(255, 255, 255, .1); */
     /* border: 1px #999999 solid; */
    }
    .text-clip {
      position: relative;
      display: inline-block;
      border: 1px #999999 solid; 
    }
    .text-clip::before {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      background-image: linear-gradient(to right, transparent, white);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* css动画 */
    @keyframes animate{
        0%{
            background-position: left 0px top 80px;
        }
        40%{
            background-position: left 800px top -50px;
        }
        80%{
            background-position: left 1800px top -50px;
        }
        100%{
            background-position: left 2400px top -50px;
        }
    }
    
    
</style>