html - 画像を点滅させるにはどうすればよいですか？

Question

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

速度も変えたいのですが、主に点滅させたいです。

Answer 1

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/

Answer 2

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