試圖學習CSS動畫，不能讓它工作

我已經使用CSS幾年了，但沒有做太多的動畫，所以我試圖教自己如何做到這一點，並沒有太多成功。我設置了關鍵幀，然後在一個對象上調用動畫，但是當我加載頁面時什麼也沒有發生;這裏是代碼：試圖學習CSS動畫，不能讓它工作

HTML：

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <link rel="stylesheet" href="style.css"> 
    <title>CSS Animation Test</title> 
    </head> 
    <body> 
    <div class="circle red"></div> 
    </body>

CSS：

@keyframes up-right { 
    0% { 
    scale: 1; 
    opacity: .25 
    } 
    50% { 
    scale: 1.5; 
    opacity: 1; 
    } 
    100% { 
    scale: 1; 
    opacity: .25; 
    } 
} 

.circle { 
    border-radius: 50%; 
    width: 80px; 
    height: 80px; 
    opacity: .25; 
} 

.red { 
    background-color: red; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-animation: up-right 1s infinite; 
    -moz-animation: up-right 1s infinite; 
    -o-animation: up-right 1s infinite; 
    animation: up-right 1s infinite; 
}

所以我必須失去了一些東西，因爲紅圈DIV絕對什麼都不做，當我加載頁面，任何援助這將不勝感激。此外，在附註中，如果任何人都可以發佈使對象實際移動（更改位置）的語法示例，這將會很有幫助。

謝謝！

來源

2014-06-25 tganyan

一切看起來好供應商前綴，除了scale以外，還需要提供瀏覽器特定的css：即。

-webkit-keyframes,-moz-keyframes,-o-keyframes等

CSS：

@-webkit-keyframes up-right { 
0% { 
    transform:scale(1); 
    -webkit-transform:scale(1); 

    opacity: .25 
} 
50% { 
    transform:scale(1.5); 
    -webkit-transform:scale(1.5); 
    opacity: 1; 
} 
100% { 
    transform:scale(1); 
    -webkit-transform:scale(1); 
    opacity: .25; 
} 
} 

@keyframes up-right { 
0% { 
    transform:scale(1); 
    -webkit-transform:scale(1); 

    opacity: .25 
} 
50% { 
    transform:scale(1.5); 
    -webkit-transform:scale(1.5); 
    opacity: 1; 
} 
100% { 
    transform:scale(1); 
    -webkit-transform:scale(1); 
    opacity: .25; 
} 
}

演示：http://jsfiddle.net/GCu2D/195/

來源

2014-06-25 16:06:13