Css swapping images and making a blink effect-CodePudding

Im trying to create a blink effect by using 2 images.

I have 2 photos with a person, one with eyes opened and another with eyes closed. How can i make a blinking effect?

I was hoping to make it as real as possible, trying to blink quickly and then keep the eyes opened for 3-5sec and then blink in 1sec.

Found one example that is almost what i need but not quite yet

Would really appreciate some help

CodePudding user response：

.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 >
  <!-- NOTE: both images should be have same dimension, look&feel -->
  <img src="https://i.stack.imgur.com/yqWK7.jpg" >
  <img src="https://i.stack.imgur.com/NgW24.jpg" >
</div>