.gif{
    width: 273px; 
    height: 281px;
    margin: 0 auto;
    background:url('//png.pookcdn.net/bcjh_lobby/h5/css_sprites.png') no-repeat;
    animation: ani 10s steps(1,end) infinite;
}


@keyframes ani {
    
    
    0% {
        background-position: -10px -10px;
    }
    
    
    2% { 
        background-position: -303px -10px; 
    }
    
    
    4% { 
        background-position: -596px -10px; 
    }
    
    
    6% { 
        background-position: -10px -311px; 
    }
    
    
    8% {
        background-position: -303px -311px;
    }
    
    
    10% {
        background-position: -596px -311px;
    }
    
    
    12% {
        background-position: -889px -10px;
    }
    
    
    14% {

        background-position: -889px -311px;
    }
    
    
   16% {

        background-position: -10px -612px;
    }
    
    
    18% {

        background-position: -303px -612px;
    }
    
    
    20% {

        background-position: -596px -612px;
    }
    
    
    22% {

        background-position: -889px -612px;
    }
    
    
    24% {

        background-position: -1182px -10px;
    }
    
    
    26% {

        background-position: -1182px -311px;
    }
    
    
    28% {

        background-position: -1182px -612px;
    }
    
    
    30% {

        background-position: -10px -913px;
    }
    
    
    32% {

        background-position: -303px -913px;
    }
    
    
    34% {

        background-position: -596px -913px;
    }
    
    
    36% {

        background-position: -889px -913px;
    }
    
    
    38% {

        background-position: -1182px -913px;
    }
    
    
    40% {

        background-position: -1475px -10px;
    }
    
    
    42% {

        background-position: -1475px -311px;
    }
    
    
    44% {

        background-position: -1475px -612px;
    }
    
    
    46% {

        background-position: -1475px -913px;
    }
    
    
    48% {

        background-position: -10px -1214px;
    }
    
    
    50% {

        background-position: -303px -1214px;
    }
    
    
    52% {

        background-position: -596px -1214px;
    }
    
    
    54% {

        background-position: -889px -1214px;
    }
    
    
    56% {

        background-position: -1182px -1214px;
    }
    
    
   58% {

        background-position: -1475px -1214px;
    }
    
    
    60% {

        background-position: -1768px -10px;
    }
    
    
    62% {

        background-position: -1768px -311px;
    }
    
    
    64% {

        background-position: -1768px -612px;
    }
    
    
    66% {

        background-position: -1768px -913px;
    }
    
    
    68% {

        background-position: -1768px -1214px;
    }
    
    
    70% {

        background-position: -10px -1515px;
    }
    
    
    72% {

        background-position: -303px -1515px;
    }
    
    
    74% {

        background-position: -596px -1515px;
    }
    
    
    76% {

        background-position: -889px -1515px;
    }
    
    
    78% {

        background-position: -1182px -1515px;
    }
    
    
    80% {

        background-position: -1475px -1515px;
    }
    
    
    82% {

        background-position: -1768px -1515px;
    }
    
    
    84% {

        background-position: -2061px -10px;
    }
    
    
    86% {

        background-position: -2061px -311px;
    }
    
    
    88% {

        background-position: -2061px -612px;
    }
    
    
    90% {

        background-position: -2061px -913px;
    }
    
    
    92% {

        background-position: -2061px -1214px;
    }
    
    
    94% {

        background-position: -2061px -1515px;
    }
    
    
    96% {

        background-position: -10px -1816px;
    }
    
    
    98% {

        background-position: -303px -1816px;
    }
    
    
    100% {

        background-position: -596px -1816px;
    }
    
    
}