web-dev-qa-db-ja.com

どのようにして画像を点滅させますか？

可能であれば、CSSで画像を点滅させる方法を考えていました。どこに点滅させたいのです。

スピードも変えたいのですが、主に点滅させたいです。

htmlcssimageblink
11
user1623495

CSSアニメーションが助けになります！

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
img {
    animation: blink 1s;
    animation-iteration-count: infinite;
}

http://jsfiddle.net/r6dje/

間隔を調整することで、それを鋭い点滅にすることができます。

@keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

http://jsfiddle.net/xtJF5/1/

48
Waleed Khan

CSSで簡単にできます。画像のCSS要素に以下のクロスブラウザコードを追加するだけです。コード内の桁を変更する場合は、タイミングも設定できます。

-webkit-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
-webkit-animation:blink normal 2s infinite ease-in-out; 
-ms-animation:blink normal 2s infinite ease-in-out; 
animation:blink normal 2s infinite ease-in-out;
1
user1874941

javaScriptのsetIntervalメソッドを使用します W3Schools の参照として使用し、cssをvisibility:visibleからvisiblity:hiddenに変更します。display:noneは使用しません。画像のスペースも同様ですが、点滅するものが機能するために画像のスペースが必要です。

1
Dhruvenkumar Shah