SVG+CSS+JSで時間表示/動画パイタイマーの作成方法

やりたいこと：タイマー（時間）を点滅できるように表示したいです

• タイマーの作成：SVG+CSS+JSで時間表示/動画パイタイマーの作成方法
• 前回紹介したタイマーの改善点：タイマー（時間）を一秒ごと点滅にして表示したほうがより見やすくなります
  • タイマーが点滅しなくても、機能には問題はありません
  • 表示上には少し硬い感じがあります

JSの関数（setInterval(で、)）内タイマーを点滅させるcssプロパティ(animation)を追加します

• css で文字点滅プロパティ（animation, keyframes）を利用します

  /*  CSS のプロパティ：animationの定義  */
  .shine{
    animation: letter-shine 1s ;
  }
  
  /*  CSS で点滅効果の作成  */
  @keyframes letter-shine{
    0% {
      opacity: 0 ;
    }
    50% {
      opacity: 1 ; 
      transform: scale(1.1);
   }
    100% {
      opacity: 0 ;
    }
  }

• JSの関数（setInterval()）内で、一秒ごとでタイマー顛末効果を追加します

  /*  一秒ごとでタイマー（shine）の点滅cssを動的に追加 */
  var count=0;
  timer=setInterval(function(){
    count ++ ;
    $(".shine").text(count);
    $(".shine").css("animation","lettle-shine-even 1s");
  }, 1000 ); 

• うまくいくはずと予測しましたが、最初の一回目だけ点滅して、二回目以降は点滅しなくなります

問題点：JSで同じcssプロパティ（animation）を追加したときにうまく動作しません

• 上記の追加方法では二回目以降はanimation効果はなくなります
• 原因は思いつきませんでした

解決１：CSSプロパティ（animation）の値（infinite）を追加

• cssプロパティ（animation）がその動作を繰り返す値（infinite）を追加すれば点滅が続きます

  /* animationの値（infinite）でタイマーを点滅させる */ 
  var count=0; 
  timer=setInterval(function(){ 
    count ++ ; 
    $(".shine").text(count); 
    $(".shine").css("animation","lettle-shine-even 1s infinite"); 
  }, 1000 ); 

• この場合、JSの関数（setInterval()）内で設定する必要はないです（cssで一回設定すればよいです）
• 問題点は、点滅開始のタイミング、タイマー中止、再開などの操作時に点滅タイミングは合わないです

解決２：二つ同じanimationのcss設定（@keyframes）を交代で設定します

• 二つ同じ点滅させるcss設定（@keyframes）を一秒ごとで交代に表示させればよいです

  // JSのロジック
  count=0;
  timer=setInterval(function(){
    count ++ ;
    $(".shine").text(count);
    $(".shine").removeAttr("style");
    if( count%2 ==0 ){
      $(".shine").css("animation","letter-shine-even 1s");
    } else {
      $(".shine").css("animation","letter-shine-odd 1s");
    }
  }, 1000 ); 
  
  /*  cssのanimationの値:@keyframes */
  @keyframes letter-shine-even{
    0% {
      opacity: 0 ;
    }
    50% {
      opacity: 1 ; 
      transform: scale(1.1);
   }
    100% {
      opacity: 0 ;
    }
  }
  
  @keyframes letter-shine-odd{
    0% {
      opacity: 0 ;
    }
    50% {
      opacity: 1 ; 
      transform: scale(1.1);
   }
    100% {
      opacity: 0 ;
    }
  }

• このような書き方では、タイマー点滅の同期管理が簡単になります
  
• 実際の点滅動画効果は以下のとなります