1
<style> 
div
{
width:50px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite alternate;
-webkit-animation:myfirst 5s infinite alternate;
}

@keyframes myfirst
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:200px; top:200px;}
75%  { left:0px; top:200px;}
100% { left:0px; top:0px;}
}


@-webkit-keyframes myfirst 
{
0%   { left:0px; top:0px;}
25%  { left:200px; top:0px;}
50%  { left:200px; top:200px;}
75%  { left:0px; top:200px;}
100% { left:0px; top:0px;}
}


</style>


<body>

<div></div>

</body>

これにある種の回転トランジションを追加することは可能ですか? コードを div 宣言に追加して別のセレクターを作成しようとしましたが、どれも機能していないようです。

4

1 に答える 1

2

おそらく次のように、別のアニメーションを追加して定義する必要があります。

@keyframes rotate
{
from {
        transform: rotate(0deg);
    }
to { 
        transform: rotate(360deg);
    }
}

次に、要素にアニメーションを追加し、コンマで区切ります。

animation:myfirst 5s infinite alternate, rotate 2.5s linear infinite;

この例では、次のことに注意してください。

  1. 2.5s最初のアニメーションで一度に 2 つの完全な回転を作成するためにこれを選択しました。よりスムーズに見えると思いました。

  2. linear虚空で果てしなく回転する感覚を与えてくれます。この効果が必要ない場合は、他の機能を試してください。

  3. alternate要素を連続的に回転させたいので、入れませんでした。

Demonstration

于 2013-03-15T22:12:16.587 に答える