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

まず、トランジションとアニメーションを区別する必要があります。

キーフレーム アニメーションは、入力 (ホバーなど) に関係なく進行中のアクティビティを定義します。

トランジションは、何かを実行したときに何が起こるかを定義します。

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

基本的に、ホバーは要素を透明にし、サイズを大きくして境界線を変更します。透明なので、境界線は関係ありません。

于 2013-11-01T15:23:49.973 に答える