Как сделать что бы анимация не выходила за пределы экрана?

Question

[barsecky]

Добрый день.
Играюсь с анимацией, и возникла у меня проблемма.
На странице есть 3 круга которые двигаются. Проблемма в том что если не сделать overflow: hidden родителю, то контейнер в какой то момент начинает увеличиваться.
Как сделать так что бы круги заходили за границы экрана пикселей на 50?
И как сделать что бы один из кругов при загрузке появлялся по середине?
Спасибо.
Ссылкка на пример:
https://codepen.io/aliakseibarsukov/pen/NWpyaQp

Comments

[Антон Литвиненко]

так и делают, оверфлоу хидден

[barsecky]

Антон Литвиненко, это я понимаю, мне интересно как сделать что бы круги не уходили за границы а отталкивались от них

Answer 1

[xenonhammer]

Чтобы круги не уходили за пределы видимости, нужно к вашему left: 0 прибавить ширину круга - left: 0 + 900px. А если круг идет вниз, то прибавлять высоту круга к значению bottom