javascript - CSS / JSを使用してアニメーション化された光る境界線？

Question

JSを使用して特定のCSSプロパティを自動的かつ継続的に変更することは可能ですか？

輝きが継続的に明るくなり、弱まる光る境界線を作成したいと思います（この効果を実現するために、境界線、ボックスシャドウ、はめ込みボックスシャドウの3つのプロパティを使用します）。どうすればいいですか？

「ホバー」または「アクティブ」状態の使用について話しているのではないことに注意してください。また、可能であれば、すべてのブラウザで動作するようにしたいと思います。

Answer 1

CSSのみのソリューションで上記の回答を操作する

@-webkit-keyframes glow {
    to {
         border-color: #69c800;
    -webkit-box-shadow: 0 0 5px #69c800;
       -moz-box-shadow: 0 0 5px #69c800;
            box-shadow: 0 0 5px #69c800;
    }
}

.myGlower {
    background-color: #ccc;
    border: 1px solid transparent;
    -webkit-animation: glow 1.0s infinite alternate;  
     -webkit-transition: border 1.0s linear, box-shadow 1.0s linear;
       -moz-transition: border 1.0s linear, box-shadow 1.0s linear;
            transition: border 1.0s linear, box-shadow 1.0s linear;
    width: 100px;
    height: 100px;
    margin: 50px;
}

Answer 2

これがJSソリューションである必要がある場合は、次のように機能します。

CSS：

#myGlower {
    background-color: #ccc;
    border: 1px solid transparent;    
    -webkit-transition: border 0.1s linear, box-shadow 0.1s linear;
       -moz-transition: border 0.1s linear, box-shadow 0.1s linear;
            transition: border 0.1s linear, box-shadow 0.1s linear;
}

#myGlower.active {
    border-color: blue;
    -webkit-box-shadow: 0 0 5px blue;
       -moz-box-shadow: 0 0 5px blue;
            box-shadow: 0 0 5px blue;
}

そして、jQueryを使用します。

$(function() {  
    var glower = $('#myGlower');
    window.setInterval(function() {  
        glower.toggleClass('active');
    }, 1000);
});

ここでjsFiddleを見ることができます。これはJSを使用して実現できますが、CSS3アニメーションを使用することもできます。

また、すべてのブラウザが前述のCSSプロパティ（トランジション、ボックスシャドウなど）をサポートしているわけではないため、すべてのブラウザで機能させることはできません。

Answer 3

私は2つの点でBenMの受け入れられた答えを修正したいと思います。1つ目は、質問からJQUeryではなくJSを期待していた私のような人に純粋なJavaScriptの答えを提供することです。2つ目は、例のようにぎくしゃくすることなく、より滑らかなアニメーションの輝きを提供することです。

よりスムーズなアニメーションを作成するには、2つの変更が必要です。境界線は1pxではなく0pxである必要があり、トランジションはアクティブとデフォルトの両方のクラスである必要があります（「パッシブ」として指定しました）。さらに、スプレッドサイズの値を使用し、トランジションに長い時間を使用すると、より微妙な効果が得られます。国境で移行する必要はないと思います。

#myGlower.passive 
{
    border: 0px solid transparent;    
    -webkit-transition: box-shadow 2s linear;
    -moz-transition: box-shadow 2s linear;
    transition: box-shadow 2s linear;
}

#myGlower.active 
{
    border-color: blue;
    -webkit-box-shadow: 0 0 10px 10px blue;
    -moz-box-shadow: 0 0 10px 1px blue;
    box-shadow: 0 0 10px 10px blue;
    /* in order: x offset, y offset, [blur size], [spread size], color */
    -webkit-transition: box-shadow 2s linear;
    -moz-transition: box-shadow 2s linear;
    transition: box-shadow 2s linear;
}

私のアニメーションでは、ユーザーが設定されたサイクル数の後に、またはユーザーの介入によって独立してアニメーションを停止するように設定できるようにしたかったのです。また、アニメーションを非グロー状態で停止したかったのです。次のコードはそれを達成し、個々の要件に合わせて変更できます。

    var done = false;       // flag to prevent resumption
    var timer;              // the setTimeout function
    var i = 0;              // counter - must be outside startMe()
    var limit = 0;          // number of times to repeat

    // call to start the animation
    function superStart(lim)
    {
        limit = lim;       // must set before startMe()
        startMe();
    }

    function startMe()
    {
        var glower = document.getElementById("myGlower");
        var currentClass = glower.className;
        if(done == false)
        {
            if(currentClass == "passive")
            {
                glower.className = "active";
            }
            else
            {
                glower.className = "passive";               
            }

            i++;

            timer = setTimeout(startMe, 1000);

            if(i >= limit)
            {
                stopMe();
            }
        }
        else
        {
            glower.className = "passive";   // finish with glow off
        }
    }

    // separate function to also allow user action to terminate
    function stopMe()
    {
        clearTimeout(timer);
        done = true;
        startMe();           // to start final cycle finishing in passive state
    }

clearTimeout（）が必要かどうかは実際にはわかりません。（それなしで動作します。）

Answer 4

Jqueryを使用したくない場合。

純粋なJavascript：

var i = 0;
var glow = document.getElementById('myGlower');
setInternval(function(){
        if(i == 0)
            glow.setAttribute('class','myGlower');
    else
            glow.removeAttribute('class');
},1000);

実例：http：//jsfiddle.net/7xvGp/1215/

Answer 5

JQueryとCSSアニメーションを使用して、

1つは最初にホバーしたときの増加用のCSSアニメーション、もう1つは変化するグロー用、もう1つはマウスがボックスから離れたときの減少用です。

（プラグインを使用したくない場合は、他の方法を使用できます。）

$('div.div').hover(
  function() {
    $(this).addClass('increase');
    setTimeout(function(){ 
      $('div.div').removeClass("increase");
      $('div.div').addClass("glow");
    }, 1000);
  },
  function() {
    $(this).removeClass('increase');
    $(this).removeClass('glow');
    $(this).addClass('fade');
    setTimeout(function(){ 
      $('div.div').removeClass("fade");
    }, 1000);
  }
);

html {
  background-color: black;
}
div {
  background-color: white;
  height: 100px;
  width: 100px;
  margin: auto;
}
.increase {
  animation: increase 1s ease-in-out;
} 
.glow {
  animation: glow 5s ease-in-out 0s infinite;
} 
.fade {
  animation: fade 1s ease-in-out;
}
@keyframes increase {
  to { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
}
@keyframes glow {
  0% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
  25% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }
  25%, 50% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
  50%, 75% { box-shadow: 0 0 30px rgba(81, 203, 238, 1); }
  75%, 100% { box-shadow: 0 0 40px rgba(81, 203, 238, 1); }
}
@keyframes fade {
  from { box-shadow: 0 0 35px rgba(81, 203, 238, 1); }
  to { box-shadow: 0 0 0px rgba(81, 203, 238, 1); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="div"></div>

PS、私はこれを書いているときにスニペット「コンソール」のスタイルを設定する方法を見つけました：

$('div').hover();

div {
  background-color: blue;
  color: red;
  height: 100px;
  width: 100px;
  margin: auto;
  outline: none;
  border: 3px solid black;;
}