Question

我正在尝试CSS动画，并仅使用Css动画制作了简单的页面过渡效果。问题是动画完成时会产生轻微的闪烁。你们可以建议一些解决方法吗？

Codepen链接-https://codepen.io/jake2917/pen/qyzxva?editors=1100

这是代码。当我尝试将h1标签居中时，问题就开始了。

body {
  margin: 0;
  padding: 0;
}

#line {
  border: 0.5px solid #130f40;
  opacity: 0;
  width: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: block;
  top: 50%;
  animation-name: run;
  animation-duration: 1s;
  transition: 0.1s ease-in;
}

#container1 {
  width: 100%;
  opacity: 0;
  background-color: #ff7979;
  position: absolute;
  top: -110%;
  transition: 0.2s ease-in;
  animation-name: cover1;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

#container2 {
  width: 100%;
  opacity: 0;
  background-color: #ff7979;
  position: absolute;
  bottom: -110%;
  transition: 0.2s ease-in;
  animation-name: cover2;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes run {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 99%;
    opacity: 1;
  }
}

@keyframes cover1 {
  0% {
    top: -10%;
    opacity: 0;
    height: 0;
  }
  100% {
    top: 0%;
    opacity: 1;
    height: 50vh;
  }
}

@keyframes cover2 {
  0% {
    bottom: -110%;
    opacity: 0;
    height: 0;
  }
  100% {
    bottom: 0%;
    opacity: 1;
    height: 50vh;
  }
}

// ADDING THIS LINE MAKE IT FLICKER
#container1 h1 {
  text-align: center;
}

<div id="line"></div>
<div id="container1">
  <h1>hello there</h1>
</div>
<div id="container2">
  <h1>hello there</h1>
</div>

Answer 1

它左右闪烁，因为您所包含的内容超过HTML正文的100％。

在许多浏览器中，他们正在添加滚动条，它将内容推到左侧。

您需要做的是添加一个简单的CSS代码overflow: hidden。这样，内容将被隐藏，主体保持100％的高度，浏览器将不会添加滚动条；

body {
  overflow:hidden;
}

CSS动画轻微闪烁

1 个答案: