CSS3 变换不透明度脉动

Question

有没有办法通过 CSS3 关键帧变换将不透明度从 0 缓慢地脉动到 1（重复），无限？或者这是否需要 jQuery 或 Javascript 在按时间间隔切换的 class 内具有过渡不透明度？

我正在尝试将其应用到我的轨道转换中（下图）。（我正在制作动态壁纸背景效果，其中多个不透明图像漂浮在我正在构建的安装程序应用程序的侧边栏图像中 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 告诉我 why it was there （在对象上创建一个反向旋转）。我已经更新了答案，并学到了一些新东西。

CSS3 变换不透明度脉动

CSS3 Transform Opacity Pulsate

css

opacity

css-transforms