css - CSS3 で、ボーダーのパルスを出し入れするキーフレームを作成できますか?

Question

境界線で囲まれた画像があります。境界線をフェードインおよびフェードアウトさせたい。不透明度 + webkit キーフレームでこれは可能ですか? アイデア？

ありがとう

Answer 1

次に例を示します。

@keyframes border-pulsate {
    0%   { border-color: rgba(0, 255, 255, 1); }
    50%  { border-color: rgba(0, 255, 255, 0); }
    100% { border-color: rgba(0, 255, 255, 1); }
}

img {
    border: 20px solid cyan;
    animation: border-pulsate 2s infinite;
}

これがフィドルです：http://jsfiddle.net/RYT8L/4/

---

現実の世界では、すべてのベンダー プレフィックスを含めるか、Lea Verouの -prefix -freeという優れたツールを使用する必要があることに注意してください(これは、私がそのフィドルで使用しているものです)。

Answer 2

境界線の色が他の要素と異なる可能性がある状況を処理するために、以下を作成しました。

これにより、異なる色の境界線を持つ複数の要素で 1 つのキーフレームを使用できます。必要なのは、rgba を編集して背景の色にすることだけです。

@keyframes border-pulse {
    50% {
        border-color: rgba(255, 255, 255, 0);
    }
}

#first {
    width: 50px;
    height: 50px;
    border: 5px solid cyan;
    animation: border-pulse 2s infinite;
}

#second {
    width: 50px;
    height: 50px;
    border: 5px solid red;
    animation: border-pulse 2s infinite;
}

<div id="first"></div>
<div id="second"></div>