如何 "css3 blink effect" 具有可见性属性

Question

我正试图在某些 DIV 上获得旧的闪烁效果。应该从不可见开始，然后在一段时间内变为可见，然后一遍又一遍地无限闪烁。 CSS 规范说 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>

Answer 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;}
}

<div>hello!!!!!!</div>

您的 CSS 动画指定从隐藏到可见的第一个从 0% 到 50% 的过渡，根据上面的规则显示元素，然后您指定从 50% 到 100% 从可见的过渡隐藏，播放时也会显示该元素。因此该元素永久可见。

通过指定

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

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

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

<div class="blink_me">everyday i'm toggling!</div>

如何 "css3 blink effect" 具有可见性属性

How to "css3 blink effect" with visibility property

css

visibility

keyframe

css-animations

如何 "css3 blink effect" 具有可见性 属性

How to "css3 blink effect" with visibility property

css

visibility

keyframe

css-animations

如何 "css3 blink effect" 具有可见性属性