動畫不能在框中工作

Question

問題是關於CSS3 -webkit-keyframes和-webkit-box-align屬性。

請訪問http://codepen.io/pleasureswx123/pen/fljFH得到更多的細節。

/* css code */ 
<style> 
    .box { 
     display:-webkit-box; 
     width:200px; 
     height:200px; 
     border:1px solid lightblue; 
     margin:0 auto;`enter code here` 
     -webkit-box-align:end; 
     -webkit-box-pack:center; 
    } 
    .inner { 
     background:red; 
     width:50%; 
    } 
    .box:hover { 
     -webkit-animation:boxalign ease-in 1s infinite; 
    } 
    /*following don't work*/ 
    @-webkit-keyframes boxalign { 
     0% { -webkit-box-align : end } 
     100% { -webkit-box-align : start } 
    } 
    </style> 
    /* html code */ 
    <div class="box"> 
     <div class="inner">safd</div> 
    </div> 

劑量CSS3 -webkit-keyframes支持-webkit-box-align財產？爲什麼我的演示沒有變化？

Answer 1

檢查：https://developer.mozilla.org/en-US/docs/CSS/box-align

在這個頁面的最後

看到「瀏覽器兼容性」和Chrome不支持框對齊。