动画不能在框中工作

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不支持框对齐。