Why is top not being respected in this sample animation I created

HTML-CSS
1

Tell us what’s happening:
I’m doing the applied visual design challenges and decided to try my own example. I created a div that grows and changes as it shows the the colours of the rainbow. I’ve added 7 key frames that change colour and opactiy, and width as the animation progresses but I can’t get the animation to drop down, even though I’ve added the top

I’ve tried a number of things but the animation plays but doesn’t drop down as expected.

Your code so far


<style>
    div {
      height: 40px;
      width: 70%;
      background: white ;
      margin: 50px auto;
      border-radius: 50px;
    }
  
    #rect {
      animation-name: rainbow;
      animation-duration: 6s;
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
    }
    
    @keyframes rainbow {
      0% {
        background-color: red;
        opacity: 0.01;
        width: 50px;
        top: 0px;   
        }
      17% {
        background-color: #FF4500;
        opacity: 0.17; 
        width:100px;     
      }
      34% {
        background-color: yellow;
        opacity: 0.34;      
        width:150px;     
      }
      51% {
        background-color: green;
        opacity: 0.51; 
        top: 100px;    
        width:200px;   
      }

      68% {
        background-color: blue;
        opacity: 0.65;    
        width:250px;     
      }
      85% {
        background-color: #4B0082;
        opacity: 0.85;     
        width:300px;     
      }
      100% {
        background-color: #EE82EE; 
        opacity: 0.99;
        top: 200px; 
         width:350px;     
      }
    }
    
    
    
  </style>
  <div id="rect"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36.

2

In this Lesson simply need to set animation-iteration-count property Nothing to change in other code.

Carefully read the instructions and then Run …

3

SorryI accidentally included the link on the question. I’ll edit it out now.

That’s not my problem. My problem is that I can’t get the sample above to work.

4

Please Post your code then we can help you.

6

I don’t understand? The whole code example is right there in the question. What other code is there?

image
image721×885 45.1 KB

7

#rect needs to use position, relative or absolute.

1 Like
9

@lasjorg - Thank you. That works great. Is there any chance that you could explain why that is and what was wrong with my thinking please?

10

The properties top, right, bottom, left only works on positioned elements, they have no effect on non-positioned elements. The default for an element is static and the positioning properties do not apply. Why? Because they follow the normal document flow, left to right (or right to left) and top to bottom.

1 Like
11

Perfect! Thank you so much for explaining that clearly and simply.