Question

我试图创建一个仅用于解决文本的CSS解决方案。案文应该说：

...研究性

我希望它能够淡入淡出，给用户留下一个印象，就是它以同样的速度进行研究。

这是我到目前为止的代码：

HTML ：

<p class="blinking">Researching...</p>

CSS ：

.blinking {
    transition: opacity 2s ease-in-out infinite;
  opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

但这不起作用，这也适用于chrome extenson，所以只要它在最新版本的chrome中工作就足够了。

Answer 1

您的问题是您在一行中使用过渡和动画。

将您的transition更改为animation，如下所示。还将不透明度更改为1 - ＆gt; 0 - ＆gt; 1代替1 - ＆gt; 0.5 - > 0因为你想要眨眼而不是1 - ＆gt; 0，而不是再次转换为1不透明度。

小提琴：https://jsfiddle.net/kc6936cw/

.blinking {

    animation: opacity 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1;
  }
}

编辑：也可以使用jtmingus评论：
您还可以将alternate标记添加到结尾，而不是从1 - ＆gt; 0 - ＆gt; 1.这看起来像animation: opacity 2s ease-in-out infinite alternate;

Answer 2

显然，应使用transition而不是animation。

.blinking {
  animation-name:animate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  opacity: 1;
}

@keyframes animate {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

Answer 3

这样做吧 https://jsfiddle.net/2wLjjpa7/1/

.blinking {
    animation: mymove 2s infinite alternate;
}

@-webkit-keyframes mymove {
    from {opacity:0;}
    to {opacity: 1;}
}

这是一个更平滑的动画

Answer 4

.blinking {
    transition: opacity 2s ease-in-out infinite;
    animation: blinker 1s linear infinite;
  opacity: 1;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5
  }

  100% {
    opacity: 0;
  }
}

已经有一个非常好的例子 How to make blinking/flashing text with css3?

如何创造＆＃34;闪烁＆＃34;仅限CSS的文字？

4 个答案: