CSS3 Transform Opacity Pulsate

Question

Is there a way to pulsate opacity from 0 to 1 (repeat) slowly with a CSS3 keyframes transformation, infinitely? Or does this require jQuery or Javascript with a transition opacity inside a class that is toggled on an interval?

I'm trying to work it into my orbit transformations (below). (I'm working on a live wallpaper background effect with multiple opaque images floating in a sidebar image on an installer application I'm building in Objective C.)

.orbit1
{
animation: myOrbit 200s linear infinite;
}

.orbit2
{
animation: myOrbit2 200s linear infinite;
}

@keyframes myOrbit1 
{
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}

@keyframes myOrbit2 
{
    from { transform: rotate(360deg) translateX(250px) rotate(-360deg) }
    to   { transform: rotate(0deg) translateX(250px) rotate(0deg) }
}

Answer 1

You can do it by adding multiple animations to the element, for example:

.orbit1
{
  /* added for example reasons */
 position :absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  width: 200px;
  height: 200px;
  background: red;
  /* ---------- */
  
  animation: myOrbit1 20s linear infinite, Pulsate 4s linear infinite;
}

@keyframes myOrbit1 
{
    from { transform: rotate(0deg) translateX(150px) rotate(0deg) }
    to   { transform: rotate(360deg) translateX(150px) rotate(-360deg) }
}

@keyframes Pulsate {
  from { opacity: 1; }
  50% { opacity: 0; }
  to { opacity: 1; }
}

<div class="orbit1"></div>

I'ved modified some of your parameters (like the speed of the animation and the opacity minimum) and added some spoof styling for the element for the purpose of the example.

Edit

I had originally thought that the multiple rotate() declarations were in error, but @vals informed me why it was there (to create a counter rotation on the object). I've updated the answer, and learned something new.