IE11 保留 CSS 动画的问题答案

【问题标题】：IE11 retaining issue with CSS animationIE11 保留 CSS 动画的问题
【发布时间】：2017-06-27 10:05:36
【问题描述】：

我在按钮中有一个 svg。它有一个初始动画，当您将鼠标悬停时，它会有另一个反转该动画以给您旋转效果。

IE11（也在 Edge 上）存在绘画问题，如重现该问题的示例所示。

http://jsbin.com/wuricogope/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<button>hi
  <svg class="icon">
    <rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">       
  </svg>
</button>
</body>
</html>

样式

* {
    box-sizing: border-box;
}

button {
    position: relative;
    background: #0066a5;
    color: #fff;
    padding: 20px;
    padding-right: 58px;
    box-shadow: none;
    transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    font-weight: 700;
    overflow: hidden;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    box-shadow: none;
}

@keyframes roll-back-rotate {
    49% {
        transform: translateY(-44px) rotate(0deg);
    }
    50% {
        transform: translateY(28px) rotate(0deg);
        opacity: 0;
    }
    51% {
        opacity: 1;
    }
}

@keyframes roll-rotate {
    49% {
        transform: translateY(28px) rotate(0deg);
    }
    50% {
        opacity: 0;
        transform: translateY(-44px) rotate(0deg);
    }
    51% {
        opacity: 1;
    }
}

.icon {
    position: absolute;
    width: 10px;
    height: 10px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    animation: roll .4s forwards;
    animation-name: roll-back-rotate;
}

button:hover .icon {
    animation-name: roll-rotate;
}

【问题讨论】：

标签： css svg css-animations internet-explorer-11

【解决方案1】：

我们为解决这个问题所做的就是用动画 top 而不是 transform:tranlateY()

【讨论】：