Question

我在按钮内有一个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;
}

Answer 1

我们为解决这个问题所做的是我们动画顶部而不是变换：tranlateY（）

IE11保留CSS动画问题

1 个答案: