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 属性？为什么我的demo没有变化？

Answer 1

检查这个:https://developer.mozilla.org/en-US/docs/CSS/box-align

在本页的末尾，您会看到“浏览器兼容性”，而 chrome 不支持框对齐。