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

＆＃13;

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

＆＃13;

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

＆＃13;

你的CSS动画指定从0％到50％的第一次转换，从隐藏变为可见，根据上面的规则显示元素，然后指定从可见到隐藏的50％到100％的转换，这也显示播放时的元素。所以元素永久可见。

指定

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

元素将保持隐藏直到50％，然后突然出现。要在最后隐藏它，您需要添加可见性：隐藏到主样式表规则而不是关键帧。

＆＃13;

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

＆＃13;

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

＆＃13;

如何＆＃34; css3闪烁效果＆＃34;具有可见性属性

1 个答案: