애니메이션이 상자에서 작동하지 않습니다.

Question

문제는 CSS3 -webkit-keyframes 및 -webkit-box-align 속성에 관한 것입니다.

Pls 자세한 내용을 보려면 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

당신은 "브라우저 호환성"과 크롬 박스 정렬을 지원하지 않습니다를 참조하십시오.