CSS Animation does not working

這是代碼，我真的不明白什麼是錯的。CSS Animation does not working

我也使用-webkit-但沒有任何區別試圖翻過移動屏幕上的對象，簡單的動畫試圖

HTML：

<body> 

    <h1 class='cloud'> 
    SKILLS 
    </h1> 

    <h1 class='balloon'> 
    WORKS 
    </h1> 

</body>

CSS：

.cloud { 
     background: url(../image/cloudskills.svg)no-repeat; 
     height:100px; 
     width:130px; 
     text-indent: -999em; 
     animation: cloud 5s linear infinite; 
     -webkit-animation: cloud 5s linear infinite; 
    } 

    @-webkit-keyframes cloud { 
     0%, 100% { 
     left: 0%; 
    } 
     50% { 
     left: 100%; 
    } 
    } 

    .balloon { 
    background: url(../image/balloonworks.svg)no-repeat; 
    width: 100px; 
    height: 130px; 
    text-indent: -999em; 
    animation: balloon 5s linear infinite; 
    } 

    @keyframes balloon{ 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
    }

來源

2014-10-05 hkk

刪除'從你的代碼here'輸入代碼。 – hutchbat 2014-10-05 13:22:31

Js Fiddle

的元素，使一些動畫position應給予如此aboslute或relative或者您可以使用margin在關鍵幀的元素移動

.cloud { 
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat; 
    height:100px; 
    width:130px; 
    background-size:100px auto; 
    text-indent: -999em; 
    animation: cloud 5s linear infinite; 
    -webkit-animation: cloud 5s linear infinite; 
    position:relative; 
} 
@-webkit-keyframes cloud { 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
} 
.balloon { 
    background: url(http://cdn.flaticon.com/png/256/8800.png)no-repeat; 
    background-size:100px auto; 
    width: 100px; 
    height: 130px; 
    text-indent: -999em; 
    animation: cloud 5s linear infinite; 
    -webkit-animation: cloud 5s linear infinite; 
    position:relative; 
} 
@-webkit-keyframes balloon { 
    0%, 100% { 
     left: 0%; 
    } 
    50% { 
     left: 100%; 
    } 
}

來源

2014-10-05 13:32:40

我只改了一點你的代碼http://jsfiddle.net/2gbngtxp/

@-webkit-keyframes cloud { 
    0% { 
    left: 0; 
} 
    50% { 
    margin-left: 100%; /*changed 'left:100%' to 'margin-left:100%'*/ 
} 
100%{ 
    left:0; 
}

來源

2014-10-05 13:28:30 Akshay

CSS Animation does not working

回答

相關問題