html - 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>