Возможно ли в CSS реализовать беспорядочное движение элемента с помощью keyframes?

Question

[Денис Букреев]

Такие дела.

Пытаюсь руками с помощью keyframes создать броуновское движение нескольких элементов, но они просто двигаются по вектору и на ключевых точках резко меняют направление - нет никакой плавности.
Сделал 10 ключевых точек с разницей у transform: translate3d() максимум в 2px между позициями - убого, нет никакой плавности, элемент просто двигается по ломаной.

Comments

[Ярослав Иванов]

jsdo.it/Kodai/brown
jsfiddle.net/PppZ3

[Kovalsky]

Ярослав Иванов: вынесите в ответ, вроде бы как раз то что нужно.

[Yustas Alexu]

Ярослав Иванов: человек спрашивает про CSS.

[Ярослав Иванов]

Yustas Alexu: 1) Возможно это не решить на css ? 2) Зачем делать колесо из css когда есть колесо из js ?

[Yustas Alexu]

Ярослав Иванов: Это вы у автора вопроса спросите, а не у меня )

[Ярослав Иванов]

Yustas Alexu: А если опираться на ваш опыт. Это можно решить на css ?)

[Yustas Alexu]

Ярослав Иванов: Если опираться на мой опыт, то нет. Да и зачем опираться на мой опыт?

[Ярослав Иванов]

Yustas Alexu: Чтобы донести то автора вопроса, что нет смысла делать на css )

[Yustas Alexu]

Ярослав Иванов: Возможно автор хотел сделать анимацию более плавной. CSS-анимация обычно плавнее чем сделанная на JS. Я думаю, в этом вся соль вопроса. Но то, что это вряд ли модно сделать на чистом CSS это да, я очень сомневаюсь. Но я вполне уверен, что это реально сделать на CSS с небольшой помощью JS, например чтобы добавить хаотичности.

Answer 1

[Ярослав Иванов]

jsdo.it/Kodai/brown
jsfiddle.net/PppZ3

Answer 2

[devstudent]

прописывать каждый пиксель в кейфреймс придется, я думаю, для плавности, разве что каким-то циклом, ну тогда проще на джаваскрипте