4

Treahouse の Web サイトとツリーで揺れるサイン エフェクトを見て以来、それを再現しようと試みてきました。

.box{
    width:50px; height:50px;
    background: blue;
    box-shadow: 0 0 5px blue;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
}

でも揺れません。

これは JS Fiddleのデモです。

私もそれを改造してみました。

bod{
  background:blue;
}
.box{
    width:50px; height:50px;
    background: yellow;
    box-shadow: 0 0 10px red,0 0 25px red inset;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    border-radius:50%;
}
@-webkit-keyframes swing {
 from {
   left: -2px;
 }
 to {
   left: 200px;
 }
}

しかし、それもうまくいきません。JS Fiddle でそのデモを参照してください。

4

2 に答える 2

18

transform: rotate()Mozilla アニメーションを使用しているため、sven のコメントで接頭辞を「-webkit-」ではなく「-moz-」に変更して使用してみてください。

以下に例を示します: http://jsfiddle.net/gVCWE/14/

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

また、それらがある理由は-moz-transform-origin: center top;、上を中心に回転するため、 left: -2px to left: 200px を使用しても意味がありません。

編集: 新しい jsfiddle の例: http://jsfiddle.net/gVCWE/20/

于 2012-03-28T16:05:43.683 に答える
0

上記の方法を使用したところ、IE 以外のすべてのブラウザで問題なく動作しました。以下のコードを使用すると、「swing」が IE10 および IE11 で動作します。IE9 ができなかったのはとても悲しい ;P

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
    -ms-animation:swing 3s infinite ease-in-out;
    -ms-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}
于 2014-12-04T11:05:25.927 に答える