0

This is the following code which has position:fixed. If I remove this line then my cubic function does not simply work. Can anyone tell me the working of thus positioning. Also, suggest some resources to understand positioning in a better way.

<style>

  .balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    position: fixed;  
    width: 50px;
    height: 50px;
    margin-top: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #ball1 { 
    left: 27%;
    animation-timing-function: linear;
  }
  #ball2 { 
    left: 56%;
    animation-timing-function: ease-out;
  }

@keyframes bounce {
  0% {
    top: 0px;
  } 
  100% {
    top: 249px;
  }
} 

</style>
<div class="balls" id= "red"></div>
<div class="balls" id= "blue"></div>
Abhishek Agarwal
  • 9
  • 1
  • well I dont see anything in your snippet, but it looks like your animation alters the `top` and `left` css properties. When you remove position `fixed` then it will default to position `static` in which those css properties have no affect – zgood Jan 10 '19 at 03:34

2 Answers2

0

Replace your CSS with this,

.balls{
    border-radius: 50%;
    background: linear-gradient(
      35deg,
      #ccffff,
      #ffcccc
    );
    width: 50px;
    height: 50px;
    animation-name: bounce;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  #red { 
    position: absolute;
    left: 200px;
    animation-timing-function: linear;
  }
  #blue { 
    position: absolute;
    left: 500px;
    animation-timing-function: ease-out;
  }
@keyframes bounce {
  0%{
    top:0;
  }
  100%{
    top:200px;
  }
}
  • Inorder for you to make an element move, You need to use CSS position property, It can be relative or absolute.
  • Fixed is not necessary because it will fix the element on to the screen.So, when you scroll down the object will move along the screen.

You can check this out if you want to learn positioning: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Thanveer Shah
  • 3,250
  • 2
  • 15
  • 31
0

Your animation changes the top and left properties of the element you are animating.

These properties only take effect if the position of the element is set to fixed, absolute or relative.

Removing the line position: fixed will set the element's position to position: static, resulting in the top and left properties having no effect.

For some resources on positioning, check out https://www.w3schools.com/css/css_positioning.asp

It explains the positioning properties that can be applied to an element as well as what the top,bottom,right and left properties will do in each case.

Josh Lim
  • 5
  • 5