如何使用可见性属性“css3 闪烁效果”答案

【问题标题】：How to "css3 blink effect" with visibility property如何使用可见性属性“css3 闪烁效果”
【发布时间】：2015-02-03 23:08:16
【问题描述】：

我正在尝试在某些 DIV 上获得旧的闪烁效果。应该从不可见开始，然后暂时可见，然后在无限闪烁中一遍又一遍。 CSS 规范说 Visible 是可动画的 Visible （我理解这是因为不能有过渡，即淡入和淡出，只是眨眼。这就是我想要的）。

但是，我的代码不起作用。 DIVS 始终可见，不闪烁，不眨眼..

关于为什么会发生这种情况的任何提示？

<style type="text/css">
.shape{
    width:36px;
    height:36px;
    position:absolute;
    border-radius:18px;
    box-shadow: 0px 0px 5px 5px rgba(217, 215, 30, 0.5);
    visibility:visible;    
}
.star-anim1 {   
    animation-name:blink;
    animation-direction:normal;
    animation-delay:5sg;
    animation-duration:5s;
    animation-iteration-count:infinite;
}
.star1{
    top:80px;
    left:60px;
}
.star2{
    right:30px;
    top:60px;
}

@keyframes blink{   

   from{
        visibility:hidden;
   }
   to{
        visibility:visible;

    }
}
</style>

</head>

<body>
<div class="container" style="position:relative;">

<div class="star-anim1 shape star1"></div>
<div class="star-anim1 shape star2"></div>
</div>

【问题讨论】：

关键帧需要供应商前缀

标签： css visibility css-animations keyframe

【解决方案1】：

为了让您使用动画，重要的是要知道您的vendor prefixes 以获得此效果。

the documentation

div{
  -webkit-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}


@keyframes blink {
	0% {display: blue}
	50% {background-color: transparent;color:transparent;}
}
@-webkit-keyframes blink {
	0% {background-color: blue}
	50% {background-color: transparent;color:transparent;}
}

&lt;div&gt;hello!!!!!!&lt;/div&gt;

您的 CSS 动画指定了第一个从 0% 到 50% 从隐藏到可见的过渡，它根据上述规则显示元素，然后您指定从 50% 到 100% 从可见到隐藏的过渡，这也显示播放时的元素。所以它永久可见的元素。

通过指定

@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }

元素会一直隐藏到 50%，然后突然出现。要在最后隐藏它，您需要将 visibility:hidden 添加到主样式表规则而不是关键帧。

.blink_me {
  background: red;
  height: 200px;
  width: 200px;
  -webkit-animation-name: toggle;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: toggle;
  -moz-animation-duration: 5s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  animation-name: toggle;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }
@-webkit-keyframes toggle {
         from {
            visibility:hidden;
         }
     50% {
            visibility:hidden;
         }
     to {
            visibility:visible;
      }
 }

&lt;div class="blink_me"&gt;everyday i'm toggling!&lt;/div&gt;

【讨论】：

嗨，使用可见性而不是不透明度的事情是我需要一个真正的 BLINK（没有过渡--> 在几毫秒内淡入/淡出）。我知道供应商前缀。为了简化我在 Chrome 和 Firefox 中使用标准和测试，持续版本（所以我肯定知道标准声明有效）
也许我解释得不好。我不想在两种背景颜色之间交替。我想要的是使用关键帧和可见性属性来改变给定 DOM 对象（比如 div、垃圾邮件或其他）的可见性。因此，给定的示例都不是有效的。
@user2500929：现在试试最后一个示例。应该是你要找的！
我说得对吗？如果我说动画不起作用，因为插入“可见”属性的方式是计时函数的 0 点和 1 点考虑两个点根据以下 Mozilla 文档可见?:developer.mozilla.org/en-US/docs/Web/CSS/…
@user2500929：我相信。