This issue revolves around the use of CSS3 properties like -webkit-keyframes and -webkit-box-align.
To learn more about this problem, please check out http://codepen.io/pleasureswx123/pen/fljFH
/* sample css code */
<style>
.box {
display:-webkit-box;
width:200px;
height:200px;
border:1px solid lightblue;
margin:0 auto;
-webkit-box-align:end;
-webkit-box-pack:center;
}
.inner {
background:red;
width:50%;
}
.box:hover {
-webkit-animation:boxalign ease-in 1s infinite;
}
/*the following keyframes don't seem to work*/
@-webkit-keyframes boxalign {
0% { -webkit-box-align : end }
100% { -webkit-box-align : start }
}
</style>
/* sample html code */
<div class="box">
<div class="inner">safd</div>
</div>
Does CSS3 support for -webkit-keyframes include compatibility with the -webkit-box-align property? And why is there no observable change in my demo?