1

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>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Mattka
  • 37
  • 4

1 Answers1

3

You overwrite the first animation with the second line.

To apply several animations, use:

animation: spin 10s, slide 10s

Will
  • 1,123
  • 1
  • 9
  • 22