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不支持box-align。

动画不能在框中工作

1 个答案: