CSS3 - 延迟后使 div 消失

Question

我正在为我的项目编写 css 代码，我只能使用 css3 动画来为 div 设置动画。我尝试使用网络中提供的一些工具生成以下代码并生成了抖动效果动画。

div.error {
    background-color: #E49F5C;
    color: #fff;
    padding: 20px;
    line-height: 50px;
    border-radius: 5px;
    font-size: 13px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    min-width: 200px;
    text-align: center;
    height: 100px;
    z-index: 99999;
    animation: animationFrames linear 1s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: animationFrames linear 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: animationFrames linear 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: animationFrames linear 1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: animationFrames linear 1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  
}
@keyframes animationFrames{
  0% {
    transform:  translate(0px,0px)  ;
  }
  10% {
    transform:  translate(-10px,0px)  ;
  }
  20% {
    transform:  translate(10px,0px)  ;
  }
  30% {
    transform:  translate(-10px,0px)  ;
  }
  40% {
    transform:  translate(10px,0px)  ;
  }
  50% {
    transform:  translate(-10px,0px)  ;
  }
  60% {
    transform:  translate(10px,0px)  ;
  }
  70% {
    transform:  translate(-10px,0px)  ;
  }
  80% {
    transform:  translate(10px,0px)  ;
  }
  90% {
    transform:  translate(-10px,0px)  ;
  }
  100% {
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  translate(0px,0px)  ;
  }
  10% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  20% {
    -moz-transform:  translate(10px,0px)  ;
  }
  30% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  40% {
    -moz-transform:  translate(10px,0px)  ;
  }
  50% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  60% {
    -moz-transform:  translate(10px,0px)  ;
  }
  70% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  80% {
    -moz-transform:  translate(10px,0px)  ;
  }
  90% {
    -moz-transform:  translate(-10px,0px)  ;
  }
  100% {
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  translate(0px,0px)  ;
  }
  10% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  20% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  30% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  40% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  50% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  60% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  70% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  80% {
    -webkit-transform:  translate(10px,0px)  ;
  }
  90% {
    -webkit-transform:  translate(-10px,0px)  ;
  }
  100% {
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  translate(0px,0px)  ;
  }
  10% {
    -o-transform:  translate(-10px,0px)  ;
  }
  20% {
    -o-transform:  translate(10px,0px)  ;
  }
  30% {
    -o-transform:  translate(-10px,0px)  ;
  }
  40% {
    -o-transform:  translate(10px,0px)  ;
  }
  50% {
    -o-transform:  translate(-10px,0px)  ;
  }
  60% {
    -o-transform:  translate(10px,0px)  ;
  }
  70% {
    -o-transform:  translate(-10px,0px)  ;
  }
  80% {
    -o-transform:  translate(10px,0px)  ;
  }
  90% {
    -o-transform:  translate(-10px,0px)  ;
  }
  100% {
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  translate(0px,0px)  ;
  }
  10% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  20% {
    -ms-transform:  translate(10px,0px)  ;
  }
  30% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  40% {
    -ms-transform:  translate(10px,0px)  ;
  }
  50% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  60% {
    -ms-transform:  translate(10px,0px)  ;
  }
  70% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  80% {
    -ms-transform:  translate(10px,0px)  ;
  }
  90% {
    -ms-transform:  translate(-10px,0px)  ;
  }
  100% {
    -ms-transform:  translate(0px,0px)  ;
  }
}

<div class="error fadeInRight" id="errorbox">Please enter title</div>

更新：我使用这个 div 来显示服务器端 php 表单验证错误消息。现在我的问题是如何让这个div显示5秒并在执行上述动画部分后以淡出效果消失。最后的动画应该只再次使用 css3。有什么帮助吗？

Answer 1

如果没有一些添加花哨的东西，我会告诉你如何能设计出这一点。

由于一个元素只能定义一个动画，因此您必须将延迟动画也放入“摇晃”效果中。例如，时间线可以是：

• 向左摇
• 向右摇
• 向左摇
• 向右摇
• 保持静止
• 褪色

例如，如果您希望在 5 秒后淡入淡出，您将不得不将动画的长度设置为 6 秒。

div {
  -webkit-animation: error 6s forwards;
  display: inline-block;
  padding: 30px;
  transition: all 0.5s;
  border-radius: 5px;
  position: absolute;
  top: 20%;
  left: 20%;
  background: lightgray;
}
@-webkit-keyframes error {
  0% {
    transform: translateX(-5px);
  }
  5% {
    transform: translateX(5px);
  }
  10% {
    transform: translateX(-5px);
  }
  15% {
    transform: translateX(5px);
  }
  20% {
    transform: translateX(-5px);
  }
  25% {
    transform: translateX(5px);
  }
  25% {
    transform: translateX(0);
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}

<div>ERROR
  <br/>Code: 150054
  <br/>Message: You're PC is about to burn up!
</div>