1

我正在学习 CSS3 转换并与供应商前缀作斗争。这只是为了好玩，但我想知道为什么圆圈在 Firefox 中悬停时会扩大，但在 Safari 和 Chrome 中会缩小。Webkit 似乎忽略了宽度和高度，但边框和不透明度很好。正常状态下的动画看起来也不错。

我尝试更改.disc:hover width，并尝试将转换更改为width而不是all（这似乎有效）.. 只是all这似乎不起作用。

页面链接： http: //ambigraph.com/sketchbook/expando/

的HTML：

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

CSS：

@keyframes expando {
    0% {
        width:50px;
        height:50px;
        color:#009;
    }
    100% {
        width:30px;
        height:30px;
        color:black;
    }
}
@-webkit-keyframes expando {
    0% {
        width:50px;
        height:50px;
        color:#009;
    }
    100% {
        width:30px;
        height:30px;
        color:black;
    }
}
body {
    margin: 0 auto;
}
.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 {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    cursor:pointer;
    border:2px double;
    opacity:0;
    width:300px;
    height:300px;
}
4

2 回答 2

1

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

清除动画似乎可以解决它。

CSS

.disc:hover {
    /* ... */
    -webkit-animation:none;
    animation:none;
}
于 2013-11-01T15:32:31.307 回答
0

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

无论您的输入如何（悬停或其他） ，关键帧动画都定义了正在进行的活动。

过渡定义了当你做某事时会发生什么。

检查两种状态之间的差异以查看正在转换的内容。删除重复项。

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

本质上，悬停使元素透明，同时增加大小和更改边框。因为它是透明的，所以边框真的无关紧要。

于 2013-11-01T15:23:49.973 回答