Как вы заставляете изображение мигать?

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

Вы можете сделать это с помощью 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;

Answer 3

Используйте метод setInterval из Javascript, используйте его как ссылку на W3Schools, а затем измените CSS visibility:visible в visiblity:hidden мы не будем использовать display:none поскольку это также удалит пространство изображения, но нам нужно пространство для изображения, чтобы мигающий объект работал.