Need help with making an animated background

Hello, fellows! My skills with css are very limited, and I wasnt able to find through the search something meaningful to build animated css background.
I need to put on the background 4 ellipses like on the screenshot below and make them slowly moving. I will appreciate any feedback.

1 Like

When do you want to make them move? On hover or continuously after the page loads?

Continuously after the page loads. Do you have a clue?

Your requirements are a little vague.

What have you tried? Do you have some code you can post so we can see what you have so far?

You can animate the transform translate and have it loop continuously by setting the animation-iteration-count to infinite.

.box {
  background-color: orange;
  height: 80px;
  width: 80px;
  animation: move 4s ease-in-out infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(200px, 100px);
  }
  100% {
    transform: translate(0, 0);
  }
}
1 Like

Thanks. Here it is, what I have done so far.
My focus is to make background more dynamic. I do not have any strong requirements. I have done 4 moving shapes – ellipses. It looks pretty close to what I wanted. Maybe, it just can be better with more smoothness and flow in motion.

.shape-1,
.shape-2,
.shape-3,
.shape-4 {
  width: 35%;
  height: 20%;
  border-radius: 50%;
  background: lightgreen;
  animation: move 10s ease-in-out infinite;
  filter: blur(100px);
}

.shape-1 {
  position: absolute;
  top: 5%;
  background-color: #B2F1DE;
  opacity: 0.55;
}

.shape-2 {
  position: absolute;
  bottom: 25%;
  background-color: #3AC922;
  opacity: 0.15;
}

.shape-3 {
  position: absolute;
  right: 10%;
  top: 15%;
  background-color: #3AC922;
  opacity: 0.15;
}

.shape-4 {
  position: absolute;
  bottom: 30%;
  right: 10%;
  background-color: #B2F1DE;
  opacity: 0.55;
}

@keyframes move {
  0% {
    transform: rotate(65.41deg) translate(0, 0);
  }
  50% {
    transform: rotate(65.41deg) translate(200px, 100px);
  }
  100% {
    transform: rotate(-110.41deg) translate(0, 0);
  }
}

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