CSS3 Animations cutting to the end on webkit - css

Question

I'm here again with another webkit css3 animation problem. I've tried absolutely everything, even over-defining CSS properties.
The problem I'm having is the hover animations are cutting to the end when hovering in and out on webkit. It also has some strangeness when activating and deactivating where it seems to remember old values and try to animate to them.
I'm wondering whether I'm just missing something here, or Chrome is just incredibly buggy recently. Here is an example:
$(".offcanvas").click(function() {
$('body').toggleClass('uk-offcanvas-page');
});
html,
body {
padding: 0;
margin: 0;
background: #de1b4a;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Bar */
header .offcanvas .bar {
display: inline-block;
position: relative;
width: 20px;
height: 2px;
margin: 8px 0 !important;
background: #fff;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:before {
content: '';
display: block;
position: absolute;
top: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
header .offcanvas .bar:after {
content: '';
display: block;
position: absolute;
bottom: 8px;
left: 0;
background: inherit;
width: inherit;
height: inherit;
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
-webkit-transition: transform 500ms ease-in-out;
-moz-transition: transform 500ms ease-in-out;
-o-transition: transform 500ms ease-in-out;
transition: transform 500ms ease-in-out;
}
/* Bar Hover */
header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(-3px);
-moz-transform: rotateZ(0deg) translateX(-3px);
-ms-transform: rotateZ(0deg) translateX(-3px);
-o-transform: rotateZ(0deg) translateX(-3px);
transform: rotateZ(0deg) translateX(-3px);
}
header .offcanvas:hover .bar:before {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
header .offcanvas:hover .bar:after {
-webkit-transform: rotateZ(0deg) translateX(6px);
-moz-transform: rotateZ(0deg) translateX(6px);
-ms-transform: rotateZ(0deg) translateX(6px);
-o-transform: rotateZ(0deg) translateX(6px);
transform: rotateZ(0deg) translateX(6px);
}
/* Bar Close */
.uk-offcanvas-page header .offcanvas .bar,
.uk-offcanvas-page header.uk-active .offcanvas .bar {
background: rgba(0, 0, 0, 0);
}
.uk-offcanvas-page header .offcanvas:hover .bar {
-webkit-transform: rotateZ(0deg) translateX(0px);
-moz-transform: rotateZ(0deg) translateX(0px);
-ms-transform: rotateZ(0deg) translateX(0px);
-o-transform: rotateZ(0deg) translateX(0px);
transform: rotateZ(0deg) translateX(0px);
}
.uk-offcanvas-page header .offcanvas .bar:before {
-webkit-transform: rotateZ(45deg) translateX(-11px);
-moz-transform: rotateZ(45deg) translateX(-11px);
-ms-transform: rotateZ(45deg) translateX(-11px);
-o-transform: rotateZ(45deg) translateX(-11px);
transform: rotateZ(45deg) translateX(-11px);
background: #fff;
}
.uk-offcanvas-page header .offcanvas .bar:after {
-webkit-transform: rotateZ(-45deg) translateX(-11px);
-moz-transform: rotateZ(-45deg) translateX(-11px);
-ms-transform: rotateZ(-45deg) translateX(-11px);
-o-transform: rotateZ(-45deg) translateX(-11px);
transform: rotateZ(-45deg) translateX(-11px);
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="center">
<header>
<div class="offcanvas"><i class="bar"></i>
</div>
</header>
</div>
I've slowed down the animations so you can see it skipping, but hover in and out to see it.
I was wondering if anyone more advanced could help me on this one?
Thanks,
Tom