在webkit

Question

我再次与另一个webkit css3动画问题。我已经尝试了一切，甚至过度定义了CSS属性。

我遇到的问题是当悬停在webkit上时，悬停动画正在切割到最后。在激活和停用它似乎记住旧值并试图为它们设置动画的地方时，它也有一些奇怪的地方。

我想知道我是否只是在这里遗漏了一些东西，或者Chrome最近只是错误的错误。这是一个例子：

＆＃13;

＆＃13;

$(".offcanvas").click(function() {
  $('body').toggleClass('uk-offcanvas-page');
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我放慢了动画的速度，这样你就可以看到它跳过了，但是可以将它们放进去看看。

我想知道是否有更高级的人可以帮我这个吗？

谢谢， 汤姆