How to Make a Blinking Image in CSS3

how to make a blinking image in CSS3

it's very simple... just use a CSS3 animation on opacity of the image

I hope this helps..

here is a working fiddle http://jsfiddle.net/rameezrami/27754r4f/1/ or use following html

<html>
<head>
<style>
/* Firefox old*/
@-moz-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 

@-webkit-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}
/* IE */
@-ms-keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {
        opacity:1;
    }
    50% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
} 
.blink-image {
    -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
    -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
    -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
    animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
}
</style>
</head>
<body>
<img class="blink-image" src="http://www.chicagoexcelclasses.com/wp-content/uploads/2014/04/css31-180x180.jpg">
</body>
</html>

blink background image in css

@Ahmad's solution is good, but it doesn't fade in smoothly. So I made a code which makes the blinking smoother.

.html_bg {
  background-image: url(https://cdn.arstechnica.net/wp-content/uploads/2020/09/macOSBigSur.jpg);
  animation: blink 1.5s infinite;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

<div class="html_bg">
  <!--Put your content here-->
</div>

How to make blinking/flashing text with CSS 3

You are first setting opacity: 1; and then you are ending it on 0, so it starts from 0% and ends on 100%, so instead just set opacity to 0 at 50% and the rest will take care of itself.

Demo

.blink_me {  animation: blinker 1s linear infinite;}
@keyframes blinker {  50% {    opacity: 0;  }}

<div class="blink_me">BLINK ME</div>

How do you make pictures blink alternatively

Try using animation-delay

.blinking {  animation: blink 1s infinite;}
.delay {  animation-delay: .5s;}
@keyframes blink {  0% {    opacity: 1;  }        50% {    opacity: 0;  }  100% {    opacity: 1;  }}

<div class="blinking">image 1</div><div class="blinking delay">image 2</div>

Css swapping images and making a blink effect

.imageswap {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
.imageswap img {
    position:absolute;
    left:0;
    top: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  object-fit: contain;
    width: 100%;
    height: 100%;
}
@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
img.openeyeimg {
    -webkit-animation: blink 5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation: blink 5s;
    -moz-animation-iteration-count: infinite;
    -o-animation: blink 5s;
    -o-animation-iteration-count: infinite;
}

<div class="imageswap">
  <!-- NOTE: both images should be have same dimension, look&feel -->
  <img src="https://i.stack.imgur.com/yqWK7.jpg" class="closeeyeimg">
  <img src="https://i.stack.imgur.com/NgW24.jpg" class="openeyeimg">
</div>

How to create Blinking text with CSS only?

Your issue is that you use transition and animation in 1 line.

Change your transition to animation like below. Also changed the opacity to 1 -> 0 -> 1 instead of 1 -> 0.5 -> 0 because you want to have a blink not 1 -> 0 and than no transition to 1 opacity again.

A fiddle: https://jsfiddle.net/kc6936cw/

.blinking {

    animation: opacity 2s ease-in-out infinite;
    opacity: 1;
}

@keyframes opacity {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0
  }

  100% {
    opacity: 1;
  }
}

Edit: jtmingus comment could also be used:

You could also add the alternate tag to the end instead of going from 1 -> 0 -> 1. That would look like animation: opacity 2s ease-in-out infinite alternate;

Creating two different styles for two different blinking class in css

You can use another keyframe for the other blinkingText(yellow).

Try this:

.blinking{    animation:blinkingText 0.8s infinite;}.blinking2{    animation:blinkingText2 0.8s infinite;}@keyframes blinkingText{    0%{ color: #000;    }    49%{    color: red; }    50%{    color: red; }    99%{    color: red; }    100%{   color: #000;    }}@keyframes blinkingText2{    0%{ color: #000;    }    49%{    color: yellow; }    50%{    color: yellow; }    99%{    color: yellow; }    100%{   color: #000;    }}

<span class="blinking">Am I blinking?</span><br/><span class="blinking2">Am I blinking?</span>

Imitating a blink tag with CSS3 animations

The original Netscape <blink> had an 80% duty cycle. This comes pretty close, although the real <blink> only affects text:

.blink {  animation: blink-animation 1s steps(5, start) infinite;  -webkit-animation: blink-animation 1s steps(5, start) infinite;}@keyframes blink-animation {  to {    visibility: hidden;  }}@-webkit-keyframes blink-animation {  to {    visibility: hidden;  }}

This is <span class="blink">blinking</span> text.

How to Make a Blinking Image in CSS3