CSS3 动画重置

mdawg 发表于 Dev

MDAWG

我刚刚了解了 CSS3 动画，我让这个淡入淡出效果，但是一旦动画完成它返回到它原来的位置，我怎样才能让它留在那里？

动画似乎也有点粗糙有没有更好的方法来编写它以使其看起来更流畅？

.logo {
width: 100%;
height: 100%;
position: relative;
animation-name: down;
animation-duration: 3s;
}

@keyframes down {
0% {top: 0px; opacity: 0;}
30% {top: 50px;}
100% {opacity: 1;}
}

前面

要在处停止元素completion of animation，因此您必须包含animation-fill-mode如下内容，

因此，使用animation-fill-mode:forwards它会在last frame执行后立即停止元素的位置。还有其他属性forwards, backwards, both，诸如此类。

但是在你的animation你没有声明animationie 在100%停止的地方结束，所以它回到0px，

检查下面的两个例子，

示例 - 1

.logo {
width: 100px;
height: 100px;
position: relative;
animation-name: down;
animation-duration: 3s;
animation-fill-mode:forwards;
background:#ccc;
top:0px;
}

@keyframes down {
  0%{
    opacity:0;
  }
  30%{
    top:30px;
  }
  100%{
    top:30px;
    opacity:1;
  }
}

<div class="logo">

</div>

示例 - 2

.logo {
width: 100px;
height: 100px;
position: relative;
animation-name: down;
animation-duration: 3s;
animation-fill-mode:forwards;
background:#ccc;
top:0px;
}

@keyframes down {
  from{
    opacity:0;
  }
  to{
    top:30px;
    opacity:1;
  }
}