UPDATE: Issue occurring on Internet Explorer 10, Windows 7
When using the transform property to adjust the horizontal position of an element during animation, the vertical value is updated as well. However, despite setting the horizontal value to the same as before, it unexpectedly moves!
Why does the horizontal position change even though the value remains constant?
Visit this link for an example.
HTML:
<div class="parent">
<div class="child">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Circle-yellow.svg/1024px-Circle-yellow.svg.png" />
</div>
</div>
JavaScript:
document.querySelector( "img" ).onclick = function(event) {
event.target.className = "test";
}
CSS:
html, body
{
height: 100%;
}
.parent
{
position: relative;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: block;
z-index: 2;
}
.child
{
position: absolute;
left: 0;
top: 0%;
height: 20%;
width: 50%;
text-align: center;
display: block;
}
.child img
{
position: absolute;
top: 35%;
left: 50%;
-webkit-transform: translate(-50%,0em) perspective(1px);
-ms-transform: translate(-50%,0em) perspective(1px);
transform: translate(-50%,0em) perspective(1px);
height: 40%;
margin-left: auto;
margin-right: auto;
display: block;
}
@keyframes test
{
0%, 50%, 100%
{
transform: translate(-50%,0em);
-webkit-transform: translate(-50%,0em);
-moz-transform: translate(-50%,0em);
}
25%
{
transform: translate(-50%,-.5em);
-webkit-transform: translate(-50%,-.5em);
-moz-transform: translate(-50%,-.5em);
}
75%
{
transform: translate(-50%,.5em);
-webkit-transform: translate(-50%,.5em);
-moz-transform: translate(-50%,.5em);
}
}
.child img.test
{
-webkit-animation-name: test;
-moz-animation-name: test;
animation-name: test;
-webkit-animation-duration: 400ms;
-moz-animation-duration: 400ms;
animation-duration: 400ms;
-webkit-animation-iteration-count: 3;
-moz-animation-iteration-count: 3;
animation-iteration-count: 3;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-fill-mode: none;
-moz-animation-fill-mode: none;
animation-fill-mode: none;
}