Question

我正在学习CSS3过渡以及与供应商前缀的挣扎。这只是为了好玩，但我想知道为什么圈子会在Firefox中悬停，因为它意味着在Safari和Chrome中缩小。 Webkit似乎忽略了宽度和高度，但边框和不透明度都很好。正常状态下的动画也很好。

我尝试更改.disc:hover width，并尝试将转换更改为width而不是all（这似乎有效）..它只是{{1}似乎无法正常工作。

指向该页面的链接： http://ambigraph.com/sketchbook/expando/

HTML：

all

CSS：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Expando</title>
<link href="expando.css" rel="stylesheet" type="text/css">
</head>
<body ontouchstart="">
  <div class="disc">
  </div> 
</body>
</html>

Answer 1

看起来它可能是动画错误，因为即使在悬停时expando动画仍然应用于该元素。每个浏览器都以不同的方式处理它。

清除动画似乎可以修复它。

CSS

.disc:hover {
    /* ... */
    -webkit-animation:none;
    animation:none;
}

Answer 2

首先，您必须区分过渡和动画。

关键帧动画定义正在进行的活动，无论您的输入是什么（悬停或其他）。

转换定义了您执行某些操作时会发生的事情。

检查两个州之间的差异，看看正在转变的是什么。删除重复项。

.disc {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius:300px;
    width:50px;
    height:50px;
    border:50px double;
    opacity:1;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-animation:expando .5s ease infinite alternate;
    animation:expando .5s ease infinite alternate;
}
.disc:hover {
    cursor:pointer;
    border:2px double;
    opacity:0;
    width:300px;
    height:300px;
}

基本上，悬停使元素透明，同时增加大小并更改边框。由于它是透明的，边界确实无关紧要。

CSS3动画/过渡webkit问题

2 个答案:

CSS