Use the buttons to start the animation, transition or both. Use 'Reset' before trying another button.
1) Animate: box should move from -100% to 100%.
2) Transition: box should move from 0 to 100%.
3) Both: the animation should win, moving the box from -100% to 100%?
In Safari, 'Both' results in the box jumping to -100% but then it immediately (on the next frame?) jumps back 0 and transitions to 100%. Also, the easing of the animation and transition seem to fight each other.
Chrome and Firefox behave as expected and move from -100% to 100%.
/* Relevant css: */
.box {
width: 100px;
height: 100px;
transform: translateX( 0 );
margin: 0 auto 8px auto;
border-radius: 4px;
background-color: #f00;
opacity: 0.25;
transition: transform 1s;
}
.box.animate {
animation-name: a;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
.box.transition {
transform: translateX( 100% );
}
@keyframes a {
0% { transform: translateX( -100% ) }
100% { transform: translateX( 100% ) }
}
Notes:
1) When `
translate: x y` is used instead of `transform: translateXYZ()`, the animation positions work as expected (going from 0 to 100%) but the easing of the animation and the transition still seem to fight each other.