cehoxameba-7267 cehoxameba-7267 - 1 year ago 48
CSS Question

Lower div deforms in CSS and jQuery animation

I am trying to make a Day & Night cycle animation with jQuery, CSS and Html.

When I run the animation by clicking the slider below, the water portion which is like a semi-circle in the bottom half of the large circle, deforms into a rectangle.

Here is the code on JsFiddle for my Day & Night cycle animation:
https:// jsfiddle.net/g0Lpzfqr/3/

Answer Source

The problem lies in your CSS code. The water Div is smaller thats why it deforms during animation. You can either:

  • increase the height and width of the only the smaller time-circle in CSS to make it larger and match other larger elements.


  • You can decrease the height and width of all other elements to match the smaller time-circle

If you want an easier solution then you should change the width and height of the .time-circle from 200px to 400px in your CSS code as below:

.time-circle {
  width: 400px;
  height: 400px;


Check your edited Jsfiddle here: https://jsfiddle.net/ydus80wp/3/ Hope it helps.