CSSまたはJQueryでdivの枠線を描画する

Question

私の目標は、私のWebページのdiv要素の境界線にアニメーションを追加することです。

私はonHoverイベントで私のdivのリストの描画/アニメーション境界線についてどうやって行くのだろうと思っています。

これはJQueryやCSS3で可能ですか？

Answer 1

まず、（非常に）古いブラウザで作業している場合を除き、CSSをアニメーションに使用することをお勧めします。アニメーションがページに不可欠な場合は、JSに戻ってしまいます。あなたは、単純なCSSトランジションと基本的なアニメーションを行うことができます

：

.example{ 
 
    border: 2px solid #dd0; 
 
    
 
    -moz-transition: border linear 1s; 
 
    -o-transition: border linear 1s; 
 
    -webkit-transition: border linear 1s; 
 
    transition: border linear 1s; 
 
} 
 
.example:hover{ 
 
    border: 2px solid #000 
 
}

<div class="example">This is some text</div>

あなたが試みることができる、より複雑な方法は、点線の境界線をアニメーション化するためにキーフレームを使用するsuch as thisもあります。以下の実施例（そのチュートリアルから採取し、変更された）：

.animation-examples { 
 
    width: 600px; 
 
    height: 120px; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: cambria; 
 
    color: #69D2E7; 
 
    outline: 10px dashed #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
} 
 

 
.animation-examples.one:hover { 
 
    animation: 1s animateBorderOne ease infinite; 
 
} 
 

 
@keyframes animateBorderOne { 
 
    0% { 
 
    outline-color: #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
    } 
 
    50% { 
 
    outline-color: #69D2E7; 
 
    box-shadow: 0 0 0 10px #E0E4CC; 
 
    } 
 
    100% { 
 
    outline-color: #E0E4CC; 
 
    box-shadow: 0 0 0 10px #69D2E7; 
 
    } 
 
}

<div id="animation-examples"> 
 
    <div class="animation-examples one"> 
 
    Sample Text 
 
    </div> 
 
</div>

Answer 2

溶液をCSSアニメーションを使用することです。基本的にキーフレームで動作します。ここで

は、あなたのdivです：

<div> 
What a test. 
</div> 

は、今すぐあなたのCSS：

div { 
    border: 3px solid black; 
} 

div:hover { 
    animation-duration: 1s; 
    animation-name: color; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes color { 
    0% { 
    border-color: darkred; 
    } 
    100% { 
    border-color: orange; 
    } 

} 

この例は広く、私は（多分SOで）見られるものからインスピレーションを得ています。フィドルhere。より多くの例here。