在CSS3动画中模仿眨眼标签

149

我真的很想让一段文字在不使用JavaScript或文字修饰的情况下闪烁出旧式风格。

没有过渡，只有* blink *，* blink *，* blink *！

编辑：这不同于那个问题，因为我要求不连续转换的眨眼，而其他问题的OP问如何用连续转换来代替眨眼

— m93a
source

1

不幸的是，我为此找到的最佳答案已被原始海报@ m93a删除，因此尚不能对其进行投票。我认为答案应该未被删除和推翻，因为它是产生最佳眨眼效果的最简单的解决方案，并且可以在所有当前版本的主流浏览器中使用。您还可以在使用WebKit CSS3动画模拟<blink>上阅读有关同一解决方案的简短博客文章。

我不明白的是为什么这里的每一个单一的答案似乎有了@-webkit-keyframes规则之后的前缀的@keyframes规则，有的甚至有-webkit-animation前置词的一个后声明。

— BoltClock

@BoltClock：这是因为CSS3动画是相对较新的，并且在Webkit浏览器中还不稳定。对于那些想要使用动画的开发人员来说，所谓的“前缀”就在这里，即使它们不稳定且尚未完成。

— m93a 2014年

@ m93a：我知道，但是我想问为什么将它们放在无前缀规则之后而不是之前（显然，我没有在原始注释中添加措辞，这是我的错误）。

— BoltClock

1

可能与如何使用css3制作闪烁的文本

— 布拉德·沃思

242

最初的Netscape <blink>具有80％的占空比。这很接近，尽管实数<blink>只影响文本：

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

This is <span class="blink">blinking</span> text.

展开摘要

您可以在此处找到有关关键帧动画的更多信息。

— 尼尔
source

2

是的，这很简单。您可以添加webkit前缀以使其在Chrome和Safari中正常工作。

— m93a 2013年

2

如果没有webkit前缀，这可能不适用于Chrome / Safari。

— David Pelaez 2014年

2

我喜欢做的是，不要让眨眼成为一类，而是让眨眼成为标签（带有

blink {       animation: blink 1s steps(5, start) infinite;       -webkit-animation: blink 1s steps(5, start) infinite;     }

）。这样，您可以只使用<blink>标记而不是<span class="blink">=）

— 416E64726577

注意：这仅是OP要求的“ <blink>模仿”。不能与color属性一起用作“开-关”眨眼动画。

— 马丁·施耐德

97

让我向您展示一些技巧。

正如Arkanciscan 所说，您可以使用CSS3过渡。但是他的解决方案看起来与原始标签不同。

您真正需要做的是：

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}
.blink {
  animation: blink 1s step-start 0s infinite;
  -webkit-animation: blink 1s step-start 0s infinite;
}

<span class="blink">Blink</span>

展开摘要

JSfiddle演示

— m93a
source

@ 42抱歉，我忘记了-webkit-前缀。我认为，它适用于所有实际的浏览器，但Chrome和Safari除外。现在，在更新之后，它应该适用于Firefox，Chrome，Opera，Safari和MSIE10。

— m93a 2012年

如所写，此答案确实适用于当前版本的Firefox，Chrome，Safari和IE。

2

由于出现错字而无法使用：在Webkit部件上，blink缺少动画名称。固定。

— Andrea Ligios 2014年

1

效果很好，谢谢，这是基于您的解决方案的我的实现：jsfiddle.net/gnx4mqc4

— Hamid Behnam

1

@ m93a：这些0% 100% { opacity: 1.0; }部分似乎是多余的，因为它们是默认的，不是吗？

— jamadagni

48

试试这个CSS

@keyframes blink {  
  0% { color: red; }
  100% { color: black; }
}
@-webkit-keyframes blink {
  0% { color: red; }
  100% { color: black; }
}
.blink {
  -webkit-animation: blink 1s linear infinite;
  -moz-animation: blink 1s linear infinite;
  animation: blink 1s linear infinite;
}

This is <span class="blink">blink</span>

展开摘要

**您需要浏览器/供应商特定的前缀：http : //jsfiddle.net/es6e6/1/。

— 比利亚什
source

1

-ms-animation或-o-animation和-moz-animation都只在版本15中存在，现在不要使用它。请访问caniuse.com以获得实际支持。您可以使用“编辑”其他的答案：很抱歉，但我不会接受这个问题:( PS。

— m93a

这只是我的老坏习惯-在所有新的CSS3属性中添加后缀。

— Belyash

这不是“ blink”，而是“ blink-fadeOut”。

— 马丁·施耐德

30

实际上，不需要visibility或opacity-您可以简单地使用color，这样做的好处是只能使文本“闪烁”：

blink {
    display: inline;
    color: inherit;
    animation: blink 1s steps(1) infinite;
    -webkit-animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { color: transparent; } }
@-webkit-keyframes blink { 50% { color: transparent; } }

Here is some text, <blink>this text will blink</blink>, this will not.

展开摘要

小提琴：http : //jsfiddle.net/2r8JL/

— SB
source

4

精彩！这是唯一提供纯文本闪烁的解决方案。所有其他解决方案也使元素的背景闪烁。要测试，请<span>在蓝色文本上使用带有白色的a <body>，对带有绿色背景的a 进行测试。仅在此解决方案中，蓝色范围背景不会闪烁。

— jamadagni

10

我为此而死：

=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content


+keyframes(blink)
  25%
    zoom: 1
    opacity: 1

  65%
    opacity: 1 

  66%
    opacity: 0

  100%
    opacity: 0

body
  font-family: sans-serif
  font-size: 4em
  background: #222
  text-align: center

  .blink
    color: rgba(#fff, 0.9)
    +animation(blink 1s 0s reverse infinite)
    +transform(translateZ(0))

.table
  display: table
  height: 5em
  width: 100%
  vertical-align: middle

  .cell
    display: table-cell
    width: 100%
    height: 100%
    vertical-align: middle

http://codepen.io/anon/pen/kaGxC（与波旁酒同礼的人）

— Airtonix
source

1

您的Codepen会产生Undefined mixin 'experimental'.错误，因此看起来无法编译并显示闪烁动画。

6

另一种变化

.blink {
    -webkit-animation: blink 1s step-end infinite;
            animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink { 50% { visibility: hidden; }}
        @keyframes blink { 50% { visibility: hidden; }}

This is <span class="blink">blink</span>

展开摘要

— 萨莎·索芬（Sasha Sofin）
source

2

在我的情况下，它以1秒的间隔闪烁文本。

.blink_me {
  color:#e91e63;
  font-size:140%;
  font-weight:bold;
  padding:0 20px 0  0;
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0.4; }
}

— 阿杰·库玛（Ajay Kumar）
source

-3

如果您想要一些发光效果，请使用此

@keyframes blink {
  50% {
    opacity: 0.0;
  }
}
@-webkit-keyframes blink {
  50% {
    opacity: 0.0;
  }
}

atom-text-editor::shadow  .bracket-matcher .region {
    border:none;
    background-color: rgba(195,195,255,0.1);
    border-bottom: 1px solid rgb(155,155,255);
    box-shadow: 0px 0px 9px 4px rgba(155,155,255,0.1);
    border-radius: 3px;
    animation: blink 2s steps(115, start) infinite;
    -webkit-animation: blink 2s steps(115, start) infinite;
}

— 尖塔刺刀
source

-5

请为您的代码找到以下解决方案。

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

Loading <span class="loader__dot">.</span><span class="loader__dot">.</span><span class="loader__dot">.</span>

— 维沙尔·基里（Vishal Kiri）
source