web-dev-qa-db-ja.com

CSS 3で点滅/点滅するテキストを作成する方法

現在、私はこのコードを持っています：

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

点滅しますが、「一方向」にしか点滅しません。つまり、それはフェードアウトするだけで、それからopacity: 1.0で再び現れ、それから再びフェードアウトし、再び現れるというように...そして私はそれをフェードアウトし、そして再びこのフェードからopacity: 1.0へ「上げる」ことを望みます。 。それは可能ですか？

csshtml5css3opacitycss-animations
220
ojek

最初にopacity: 1;を設定してから0で終了しているので、0%で始まり100%で終わるので、代わりに0でopacityを50%に設定するだけで残りはそれ自体で処理されます。

デモ 

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

ここでは、アニメーションのデュレーションを設定するのはtimingをlinearに設定するよりも1 secondにする必要があります。つまり、infiniteを使用します。これは継続して継続することを意味します。

注：これがうまくいかない場合は、animationと-webkitに必要なブラウザの接頭辞-moz、@keyframesなどを使用してください。あなたは私の詳細なコードを参照することができます ここで

コメントしたように、これは古いバージョンのInternet Explorerでは動作しません。そのため、jQueryまたはJavaScriptを使用する必要があります。

(function blink() { 
  $('.blink_me').fadeOut(500).fadeIn(500, blink); 
})();

より良いアプローチを提案してくれたAlnitakに感謝します 。

デモ （jQueryを使ったブリンカー）

528
Mr. Alien

animation-direction にalternateの値を使用します（この方法でkeframeを追加する必要はありません）。

alternate

アニメーションは各サイクルの方向を逆にする必要があります。逆方向に再生すると、アニメーションステップは逆方向に実行されます。さらに、タイミング機能も逆になります。たとえば、イージーインアニメーションを逆方向に再生すると、イーズアウトアニメーションに置き換えられます。偶数反復であるか奇数反復であるかを判断するためのカウントは1から始まります。

_ css _ ：

.waitingForConnection {
  animation: blinker 1.7s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}
@keyframes blinker { to { opacity: 0; } }

fromキーフレームを削除しました。見つからない場合は、要素のアニメーションプロパティに設定した値（この場合はopacity）から、または設定していない場合（この場合は設定していない場合）のデフォルト値から生成されます。 value（opacityの場合は1）.

そしてWebKit版だけを使わないでください。それ以降も接頭辞のないものを追加してください。もっと少ないコードを書きたいだけの場合は、 短縮形 を使用してください。

65
Ana

古い<blink>のように、純粋な「100％オン、100％オフ」の点滅を取得する最良の方法は次のとおりです。

.blink {
  animation: blinker 1s step-start infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink">BLINK</div>
45
Timmmm

あるいは、表示と非表示を徐々に切り替える必要がない場合（テキストの点滅カーソルなど）は、次のようにします。

/* Also use prefixes with @keyframes and animation to support current browsers */
@keyframes blinker {  
  from { visibility: visible }
  to { visibility: hidden }

  /* Alternatively you can do this:  
  0% { visibility: visible; }
  50% { visibility: hidden; }
  100% { visibility: visible; }
  if you don't want to use `alternate` */
}
.cursor {
  animation: blinker steps(1) 500ms infinite alternate;
}

すべての1s.cursorはvisibleからhiddenに行きます。

CSSアニメーションがサポートされていない場合（例えばSafariのいくつかのバージョンで）、この単純なJSインターバルにフォールバックすることができます。

(function(){
  var show = 'visible'; // state var toggled by interval
  var time = 500; // milliseconds between each interval

  setInterval(function() {
    // Toggle our visible state on each interval
    show = (show === 'hidden') ? 'visible' : 'hidden';

    // Get the cursor elements
    var cursors = document.getElementsByClassName('cursor');
    // We could do this outside the interval callback,
    // but then it wouldn't be kept in sync with the DOM

    // Loop through the cursor elements and update them to the current state
    for (var i = 0; i < cursors.length; i++) {
      cursors[i].style.visibility = show;
    }
  }, time);
})()

この単純なJavaScriptは実際には非常に高速であり、多くの場合、CSSよりも優れたデフォルトになる可能性があります。注目に値するのは、JSアニメーションを遅くするのはDOM呼び出しの数が多いことです（例：JQueryの$ .animate（））。

また、.cursor要素を後で追加しても、状態が共有されているので他の.cursorsとまったく同時にアニメーション化されますが、私の知る限りCSSでは不可能です。

15
MattSturgeon

理由はわかりませんが、visibilityプロパティのみをアニメートしてもどのブラウザでも機能しない。

ブラウザにテキストをフェードインまたはフェードアウトさせるのに十分なフレームがないように、opacityプロパティをアニメートすることができます。

例：

span {
  opacity: 0;
  animation: blinking 1s linear infinite;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}
<span>I'm blinking text</span>
12
josketres

持続時間と不透明度を適切に変更してください。

.blink_text { 
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 3s;
    animation-timing-function: linear; 
    animation-iteration-count: infinite; color: red; 
} 

@-moz-keyframes blinker {
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
}

@-webkit-keyframes blinker { 
    0% { opacity: 1.0; }
    50% { opacity: 0.3; }
    100% { opacity: 1.0; } 
} 

@keyframes blinker { 
    0% { opacity: 1.0; } 
    50% { opacity: 0.3; } 
    100% { opacity: 1.0; } 
}
8
James Hilliard
@-webkit-keyframes blinker {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}
8
onon15

最近、キーフレームを増やした新しいものを追加したいと思いました...組み込みのコードスニペットに問題があったので、こちらが CodePenの例 です。

.block{
  display:inline-block;
  padding:30px 50px;
  background:#000;
}
.flash-me {
  color:#fff;
  font-size:40px;
  -webkit-animation: flash linear 1.7s infinite;
  animation: flash linear 1.7s infinite;
}

@-webkit-keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
@keyframes flash {
  0% { opacity: 0; } 
  80% { opacity: 1; color:#fff; } 
  83% { opacity: 0; color:#fff; } 
  86% { opacity: 1; color:#fff;}  
  89% { opacity: 0} 
  92% { opacity: 1; color:#fff;} 
  95% { opacity: 0; color:#fff;}
  100% { opacity: 1; color:#fff;}
}
<span class="block">
  <span class="flash-me">Flash Me Hard</span>
</span>
2
hsobhy
<style>
    .class1{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:#2a9fd4;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:45px;
    }
     .class2{
        height:100px;
        line-height:100px;
        color:white;
        font-family:Bauhaus 93;
        padding:25px;
        background-color:green;
        border:outset blue;
        border-radius:25px;
        box-shadow:10px 10px green;
        font-size:65px;
    }
</style>
<script src="jquery-3.js"></script>
<script>
    $(document).ready(function () {
        $('#div1').addClass('class1');
        var flag = true;

        function blink() {
            if(flag)
            {
                $("#div1").addClass('class2');
                flag = false;
            }
            else
            { 
                if ($('#div1').hasClass('class2'))
                    $('#div1').removeClass('class2').addClass('class1');
                flag = true;
            }
        }
        window.setInterval(blink, 1000);
    });
</script>
0
Shahaji
.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>
0
Paresh Shiyal