Css交换图像并制作闪烁效果答案

【问题标题】：Css swapping images and making a blink effectCss交换图像并制作闪烁效果
【发布时间】：2021-12-30 09:52:21
【问题描述】：

我正在尝试使用 2 个图像来创建闪烁效果。

我和一个人有两张照片，一张睁着眼睛，另一张闭着眼睛。如何制作闪烁效果？

我希望让它尽可能真实，尝试快速眨眼，然后睁开眼睛 3-5 秒，然后在 1 秒内眨眼。

找到一个几乎是我需要但还不完全的例子

非常感谢一些帮助

【问题讨论】：

寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/example doesn't work can I just paste a link。

标签： css sass

【解决方案1】：

.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>

【讨论】：

为什么它在反应中不起作用？
谢谢，成功了，只需要添加@keyframes blink