Why does html not rotate and slide a div simultaneously? [duplicate]

Question

so basically i have 2 keyframes in my css file but when i apply them both together to the div it only spins and doesnt slide. i didnt specify any margin or padding and if i try to execute them both separately they work just fine.

body {
  background-color: black;
}

.Box {
  width: 10px;
  height: 10px;
  background-color: white;
  animation: slide 10s linear infinite;
  animation: spin 10s linear infinite;
}

@keyframes slide {
  from {
    margin-bottom: 0px;
  }
  to {
    margin-top: 200px;
  }
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

<body>
  <div class="Box"></div>
</body>

Will · Accepted Answer · 2022-06-01 18:00:09Z

3

You overwrite the first animation with the second line.

To apply several animations, use:

animation: spin 10s, slide 10s

answered Jun 1, 2022 at 18:00

Will

1,2031 gold badge10 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does html not rotate and slide a div simultaneously? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related