Question

是否有办法通过CSS3关键帧变换，无限地将不透明度从0脉冲到1（重复）？或者这是否需要在一个间隔内切换的类中具有转换不透明度的jQuery或Javascript？

我试图将其用于我的轨道变换（下图）。（我正在处理一个动态壁纸背景效果，其中多个不透明图像浮动在我在目标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告诉我why it was there（在对象上创建一个反转）。我已经更新了答案，并学到了新的东西。

CSS3变换Opacity Pulsate

1 个答案: