CSS3转换不透明度脉动

Question

有没有一种方法可以通过CSS3关键帧转换将不透明度从0缓慢地波动到1（重复）？还是这需要在间隔内切换的类中具有过渡不透明度的jQuery或Javascript？

我正在尝试将其应用于我的轨道转换（如下）。（我正在制作动态壁纸背景效果，使多个不透明图像漂浮在我在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

您可以通过向元素添加多个动画来做到这一点，例如：

.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>

我已修改了一些参数（例如动画的速度和最小的不透明度），并为该示例添加了一些元素的欺骗样式。

编辑

我原本以为多个rotate()声明是错误的，但是@vals告诉我它为什么在那里（在对象上创建反向旋转）。我已经更新了答案，并学到了一些新知识。