css - 动画在盒子里不起作用

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