Одновременная CSS анимация и спиновый переход

Question

Одновременная CSS анимация и спиновый переход

<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 и создать другой селектор, но ни один из них не работал.

1

css css-transitions webkit-transform

Источник

user2121482 15 мар '13 в 21:49

1 ответ

Решение

Другие вопросы по тегам css css-transitions webkit-transform

user313115 15 мар '13 в 22:12 2013-03-15 22:12 · Accepted Answer · 2013-03-15 22:12

Вы должны добавить и определить другую анимацию, возможно, так:

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

А затем добавьте анимацию к вашему элементу, разделяя его запятой:

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

В этом примере обратите внимание на следующие вещи:

2.5s Я выбрал это, чтобы сделать два полных поворота за один раз вашей первой анимации, я думал, что это выглядело более плавно.
linear дает вам ощущение бесконечного вращения в пустоте. Попробуйте другие функции, если вы не хотите этот эффект.
Я не ставил alternate потому что мы хотим, чтобы элемент вращался непрерывно.

демонстрация