HTML:

html
 
 
Copy code
<div class="container">
  <div class="ball"></div>
</div>

CSS:

css
 
 
Copy code
.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: blue;
  position: absolute;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

JavaScript: (none needed for this task)

This code creates a blue ball that bounces up and down using CSS animations. The .container div is used to center the ball on the page vertically and horizontally. The .ball div is positioned absolutely and given a border-radius of 50% to create a circular shape. The @keyframes rule is used to define an animation that moves the ball up and down using the translateY function. The animation property is applied to the .ball div to make it bounce continuously.

You can create a moving text with JavaScript. First, create a simple HTML page that displays the text you want to animate. Next, add JavaScript to the page to create an animation effect. You can use CSS keyframes to animate the text, or use the setInterval function to move the text around the page.

For example, the following code displays a sentence that scrolls left across the screen:

javascript
 
 
Copy code
<div class="scrolling-text">
  Scrolling text! 
</div>

<style>
  .scrolling-text {
    position: relative;
    white-space: nowrap;
    animation: scroll-left 20s linear infinite;
  }

  @keyframes scroll-left {
    from {
     left: 100%;
     width: 500%; 
    }
    to {
      left: -100%;
      width: 500%;
    }
  }
</style>

<script>
  function scrollleft() {
    document.getElementById("scrolling-text").style.left = '100%';
    setTimeout(scrollleft, 25);
  }
   scrollleft();
</script>

You can learn more about using JavaScript for animation in this MDN guide.

You can use the CSS animation property to create an infinitely animating gradient. The code for this would look something like this:

css
 
 
Copy code
background: linear-gradient(. . .);
animation: animate-gradient 5s linear infinite;

@keyframes animate-gradient {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}

You can learn more about animating gradients here: https://codepen.io/taniarascia/pen/jkpdbp.

CSS animation is the use of animation effects using cascading style sheets (CSS). Typically, there are two components to using CSS animation: setting up the animation using keyframes and applying the animation to an element using the animation property. CSS animation can be used to animate HTML elements like text, images, and shapes, as well as pseudo-elements. Alternatively, animations can be created using JavaScript and the DOM.