Top-Down animation instead of L-R and px behaviour

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**


<style>

#ball {
  width: 70px;
  height: 70px;
  margin: 50px auto;
  position: fixed;
  left: 20%;
  border-radius: 50%;
  background: linear-gradient(
    35deg,
    #ccffff,
    #ffcccc
  );
  animation-name: fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes fade {
  50% {
    top: 60%;
    opacity: 0.5;
  }
}

</style>

<div id="ball"></div>

2 things I’m confused about here:

  1. So I’ve been trying to move the ball in a vertical manner but I don’t understand why the animation is getting skipped. All I see is the ball at initial position which skips to a new position at 60% and back to start but the transition movement effect is not taking place like it does with left to right and back

  2. In the original problem of Left-Right transition If I use left: 60px; instead of % why does the ball go to the left from the initial position instead of going to right and coming back?

    Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:89.0) Gecko/20100101 Firefox/89.0

Challenge: Create Visual Direction by Fading an Element from Left to Right

Link to the challenge:

2

Because 20% is greater than 60px in this case.

It’s because there is no initial top value set in #ball.

3

Hi, appreciate your explanation. I did get the px part. However, I don’t get why there needs to be an initial top value set in #ball? As in, in a previous problem the position of div was set to relative and it was possible to move the rectangle vertically without setting the top value in div. I’d really appreciate if you could elaborate a bit on that.

4

In the @keyframe in your code only has a 50%

It doesn’t need to be set outside the keyframe (in #ball) but it does need to be set… In the link You provided the @keyframe has
0%{
top: (starting position)
}
50% {
top: (position at 50%)
}
100% {
top: (position at 100%)
}
So, in your link the start and end are set in the keyframe. My opinion only, the easiest to read is in the keyframe, but as these examples show the start/ end doesn’t have to be in the @keyframe.

5

I see. I get it now. I just tried that and was experimenting with what you suggested and found something unusual wrt the functionality of mentioning it inside the @keyframes or outside. In the example of my main post, adding the 0% frame only made it go down but it did not come back up.
However, if the top is declared in #ball, it comes back up even without 100% frame. So is this behavior normal?

6

That’s because you gave it a starting value, but it still does not have a ending value where you want it to go, so it stops after going down. You also need to add where it should be at 100%.

Yes, because the top position declared in #ball is the start and ending position.

7

I see. That makes a lot of sense now. Thank you for your time. Really appreciate it and hope you have a good day/night.

8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.