CSS3变换透明度脉动

Question

CSS3变换透明度脉动

3

有没有一种方法可以用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) }
}

- Volomike

你想要它的脉动速度有多慢？是每次旋转的时长还是大约每秒钟一次？ - Jesse Kernaghan

那是我可以更改的参数。我可能会做一些微妙的事情，比如在8秒的时间范围内从0到0.8。 - Volomike

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jesse Kernaghan · Accepted Answer

你可以通过给元素添加多个动画来实现，例如：

.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告诉我为什么需要这样做（在对象上创建反向旋转）。我已更新答案，并学到了新知识。