SVG+CSS+JSで時間表示/動画パイタイマーの作成方法2:タイマー点滅効果の追加
やりたいこと:タイマー(時間)を点滅できるように表示したいです
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効果はなくなります
- 原因は思いつきませんでした
解決1:CSSプロパティ(animation)の値(infinite)を追加
解決2:二つ同じ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 ;
}
}
- このような書き方では、タイマー点滅の同期管理が簡単になります

- 実際の点滅動画効果は以下のとなります