CSS3アニメーションでまばたきタグを模倣する


149

JavaScriptやテキスト装飾を使用せずに、テキストの一部を旧式のスタイルに点滅させたいと思っています。

遷移なし、* blink *、* blink *、* blink *のみ!


編集:これはその質問とは異なります。私は連続的な遷移なしで点滅を要求するのに対し、他の質問のOPは点滅を連続的な遷移で置き換える方法を尋ねます


1
これについて私が見つけた最良の回答は、残念ながら元のポスター@ m93aによって削除されたため、まだ賛成できません。答えは削除せずに賛成するべきだと思います。これは最高の瞬き効果を生み出す最も簡単なソリューションであり、主要なブラウザーのすべての現在のバージョンで機能するためです。WebKit CSS3アニメーションを使用した<blink>のエミュレートで、同じソリューションに関する短いブログ投稿を読むこともできます。

私が理解していないのは、ここでのすべての答えが、接頭辞なしの@-webkit-keyframes規則のに規則があるように見える理由@keyframesであり、いくつかは、接頭辞なしの規則の-webkit-animation後に宣言さえある。
BoltClock

@BoltClock:CSS3アニメーションは比較的新しく、Webkitブラウザーではまだ安定していないためです。いわゆる「プレフィックス」は、不安定で終了していない場合でもアニメーションを使用したい開発者向けです。
m93a 2014

@ m93a:私はそれを知っていますが、なぜそれらが接頭辞なしの規則の後ろではなく、前に置かれるのかを尋ねています(どうやら、私は元のコメント、私の間違いにその句を含めませんでした)。
BoltClock

回答:


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.

キーフレームアニメーションの詳細については、こちらをご覧ください


2
ええ、それははるかに簡単です。ChromeとSafariで機能するようにwebkitプレフィックスを追加できます。
m93a

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>模倣」のみです。ie colorプロパティでは「オンオフ」の点滅アニメーションとして使用できません。
Martin Schneider

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デモ


@ Forty-Two申し訳ありませんが、-webkit-接頭辞を忘れてしまいました。ChromeとSafariを除くすべての実際のブラウザで機能しました。これで、アップデート後、Firefox、Chrome、Opera、Safari、MSIE10で動作するようになります。
m93a 2012

書かれているように、この回答は確かにFirefox、Chrome、Safari、IEの現在のバージョンで機能します。

2
タイプミスが原因で機能しませんでした。Webkitの部分では、アニメーション名blinkがありませんでした。修繕。
Andrea Ligios 14

1
うまく動作します。ありがとうござい
Hamid

1
@ m93a:0% 100% { opacity: 1.0; }セクションはデフォルトであるため、不要なようです。
jamadagni 2016年

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/


1
-ms-animationや-o-animationのようなものはなく、-moz-animationはバージョン15にしかありませんでした。今は使用しないでください。実際のサポートについては、caniuse.comをご覧ください。申し訳ありませんが、私はこの質問を受け付けません:( PSを:あなたは他の回答に[編集]を使用することができます。
m93a

それはちょうど私の古い悪い習慣です-すべての新しいCSS3プロパティにサフィックスを追加します。更新された答え。
Belyash 2013

これは「点滅」ではなく「点滅-フェードアウト」です。
Martin Schneider

30

実際にはvisibilityor の必要はありません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/


4
素晴らしい!これは、テキストのみの点滅を提供する唯一のソリューションです。他のすべてのソリューションも要素の背景を点滅させます。テストするには、緑の背景に<span>、青のテキストに白のテキストを使用し<body>ます。このソリューションでのみ、青いスパンの背景は点滅しません。
jamadagni 2016年

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(バーボン付きSass)


1
コードペンは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>


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; }
}

-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;
}

-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>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.