Chrome 35.0.1916.114 issue

Easing breaks and becomes linear if "from"/0% keyframe is not "defined". When adding an empty "from"/0% keyframe, the easing works fine again. <a href="http://google.com">Google</a>

by crnacura

HTML

<!-- 
Chrome 35.0.1916.114 issue:
Easing breaks and becomes linear if "from"/0% keyframe is not "defined".  When adding an empty "from"/0% keyframe, the easing works fine again. 
--!>

<div class="outer">
    <div class="inner"></div>
</div>

CSS

.outer {
    width: 400px;
    height: 100px;
    background: #edb278;
}

.inner {
    width: 100px;
    height: 100%;
    background: #6b4751;
}

.outer:hover .inner {
    -webkit-animation: moveRight 0.8s ease forwards;
    animation: moveRight 0.8s ease forwards;
}

@-webkit-keyframes moveRight {
    to { -webkit-transform: translate(300px); }
}

@-webkit-keyframes moveRightWorking {
    from { }
    to { -webkit-transform: translate(300px); }
}

@keyframes moveRight {
    to { transform: translate(300px); }
}