文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS动画的IE11保留问题

问CSS动画的IE11保留问题
EN

Stack Overflow用户

提问于 2017-02-09 19:51:10

回答 1查看 202关注 0票数 1

我在一个按钮里面有一个svg。它有一个初始动画，当你悬停时，它会有另一个动画反转动画，为你提供旋转效果。

在IE11(也在边缘上)中有一个绘画问题，如重现该问题的示例所示。

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

Stack Overflow用户

发布于 2017-05-13 02:34:34

为了解决这个问题，我们用top而不是transform:tranlateY()

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42135986

复制

相似问题

问CSS动画的IE11保留问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画的IE11保留问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS动画的IE11保留问题
EN