0

I have an idea in mind, and want some perspectives on what would make sense for the best implementation. The premise is basically slow moving objects ricocheting around inside an enclosure. Think like the game 'asteroids' but without a spaceship (and colliding with the walls instead of passing through).

Because this is to be in the background and purely aesthetic, I figure it's got to be pretty lightweight. I would use all CSS, but my question is can multiple animations be applied to an object? Say if I have a square bouncing around in a box using 

---------
.square {
        animation: moveX 2.05s linear 0s infinite alternate, moveY 2.4s linear 0s infinite

       @keyframes moveX {
         from { left: 0; } to { left: 480px; }
       }

       @keyframes moveY {
         from { top: 0; } to { top: 280px; }
       }
}

How can I get it to rotate continuously as well? Or at least create some effect that does so? If I need to put something together with javascript then that's fine, just curious whether I'm overlooking something with the CSS.

Benediah
  • 127
  • 1
  • 8
  • 1
    Take a look at [this answer](http://stackoverflow.com/a/21320622/3157745). You can add the `rotating` class onto your `square` class element and play with that result. Chaining animations based on different classes is a possible solution, as well as chaining multiple animations into the same class. – Xenyal Nov 14 '16 at 00:24

1 Answers1

1

You can add rotation to the element in CSS:

.square {
  position: relative; /* Ensure it's movable with non static position */
  animation:
    moveX 2.05s linear 0s infinite alternate,
    moveY 2.4s linear 0s infinite,
    rotate 2s linear infinite;
}
@keyframes moveX {
  from { left: 0; } to { left: 480px; }
}
@keyframes moveY {
  from { top: 0; } to { top: 280px; }
}
@keyframes rotate {
  0% {transform: rotate(0deg);} 100% {transform: rotate(359deg);}
}

Use -359deg to rotate counterclockwise.

Jared Insel
  • 86
  • 4