Why not background-color but background?

Tell us what’s happening:
Describe your issue in detail here.
Adding background: #00FF; on 50% makes ball’s background color to change
but background-color: #00FF; doesn’t makes difference.
why is this happening?
sorry for my bad english.

  **Your code so far**


#ball {
  width: 100px;
  height: 100px;
  margin: 50px auto;
  position: relative;
  border-radius: 50%;
  background: linear-gradient(
  animation-name: bounce; 
  animation-duration: 1s;
  animation-iteration-count: infinite;

@keyframes bounce{
  0% {
    top: 0px;
  50% {
    top: 249px;
    width: 130px;
    height: 70px;
    <!-- right here -->
  100% {
    top: 0px;
<div id="ball"></div>
  **Your browser information:**

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36

Challenge: Animate Elements Continually Using an Infinite Animation Count

Link to the challenge:

@robotta, it’s good that you’re trying different things within the lessons rather than just getting the answer and moving on.

This is a question you should search for on your own and then ask questions if there’s something you don’t understand.
To get you started, here is an article that may answer your question.

1 Like

From Mozilla Developer Network docs:

The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

This property is a shorthand for the following CSS properties:

1 Like

Also, #00FF is not a valid hex color. The hex code should be 3 or 6 characters.


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