Why does html not rotate and slide a div simultaneously?

user_19227305 0
Viewed 30

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>

css html
1 Answers

You overwrite the first animation with the second line.

To apply several animations, use:

animation: spin 10s, slide 10s

user_65128570
Related