Как сделать анимацию на keyframes по овалу?

Question

[Stepan S.]

Пример по кругу: lea.verou.me/css-4d/#circle-demo-3

(там же и код можно править)

Answer 1

[Евгений Петров]

Добавляем в код контейнер:

<div class="smile">
	<img src="http://lea.verou.me/css-4d/img/smile.png" alt=":)" class="smile-image">
</div>

В CSS для контейнера прописываем сжатие (у меня в примере вдвое), а сжатие по горизонтали компенсируем в наборе правил.

@keyframes circle {
	from {
		transform: rotate(0deg) translate(-330px) rotate(0deg) scale(2, 1);
	}
	to {
		transform: rotate(360deg) translate(-330px) rotate(-360deg) scale(2, 1);
	}
}
.smile {
	transform: scale(.5, 1);
}

Введение контейнера позволяет просто без пересчёта менять масштаб, пропорции, наклон.
Как в первом блоке codepen.io/cleric/pen/mfyaE или третьем с использованием позиционирования.

Comments

[Stepan S.]

Подскажите. А как правильней в вашем пене добавить 2, 3, 4 объект… (я имею ввиду вращающийся)

[Евгений Петров]

@miloslovesky я не совсем понял, но уж как понял — обновите пример.

[Stepan S.]

Да. Я это и имел ввиду. Можно проще — с задержкой анимации. Но тогда изначально выглядит не красиво. Видимо придётся несколько кейфреймов создавать

[Stepan S.]

@Petroveg Кстати ваш .inner случайно никак не связан, с тем, что у блока, который необходимо трансформировать в овал после трансформации высота неправильная (я например решил отрицательным маргином — codepen.io/miloslovesky/pen/dGvqy)

[Stepan S.]

* codepen.io/miloslovesky/pen/dGvqy

[Евгений Петров]

Я же убрал .inner из примера с CSS-анимацией. Там овал с помощью :before поставлен.

[Евгений Петров]

И да — я же координаты относительно центра задал. То есть я полагаю, что координаты должны задаваться центру фигуры.
Относительно которого также компенсируется поворот (transform-origin).

[Евгений Петров]

И да — положение фигуры относительно точки движения я компенсирую отрицательным margin.
Ну а про несколько @keyframe не понял — обновите пример. Они те же, но я поставил компенсацию трансформации для 3-х блоков и каждому задал свою задержку.

[Stepan S.]

@Petroveg Вы как раз всё правильно поняли. Т.е. когда они стартуют с разных точек выглядит лучше, чем когда одна за другой. Просто кода больше выходит

[Stepan S.]

@Petroveg Еще вопрос. Если трансформация объектом в мобильном вебките поехала это как-то лечится?

[Евгений Петров]

@miloslovesky охох... Не знаю — не проверял.

Answer 2

[Александр Таратин]

jsfiddle.net/vals/5w3bE/embedded/result

Comments

[Stepan S.]

Это я видел. Мне не нужно трансформировать всё подряд. Надо только запустить объект по «овальной траектории»