CSS3 TransformY к началу

Question

Я пытаюсь создать эффект, похожий на то, как пузырь из воды поднимается снизу страницы вверх, как пузырь поднимается из воды, используя CSS3, и я совершенно потерян, делая это.

У меня есть это скрипка

Можете ли вы мне помочь, если я действительно смогу дать эффект, будто пузырь идет снизу вверх?

Answer 1

С помощью CSS3 легко переносить верхнее или нижнее значение из одного числа в другое. Вы можете увидеть это здесь: http://jsfiddle.net/jfriend00/t9Kyj/.

Вы, очевидно, не можете переходить с CSS3 из:

top: auto;
bottom: 0;

до

top: 0;
bottom: auto;

Итак, некоторые другие идеи заключаются в том, чтобы найти другой метод CSS для определения верхней и нижней позиции, который будет выполнять переход CSS3 для или программно устанавливать верх / низ на основе высоты окна.