无法使CSS3动画连续

Question

我正在关注一个博客，以了解CSS3动画。我想用CSS3垂直做边框效果。我跟着this example。但我的问题是为什么重启动画有一些延迟？当滚动向下时，它不会立即从顶部开始。那里有2,3秒的延迟。如何在滚动结束后立即从顶部开始动画。我在这里附加gif文件以便更好地理解。

代码段：

<!DOCTYPE html>
<title>Example</title>

<!-- Styles --> 
<style>
.example3 {
 height: 200px; 
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(-100%);
 -webkit-transform:translateY(-100%);   
 transform:translateY(-100%);
 /* Apply animation to this element */  
 -moz-animation: example3 15s linear infinite;
 -webkit-animation: example3 15s linear infinite;
 animation: example3 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example3 {
 0%   { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes example3 {
 0%   { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes example3 {
 0%   { 
 -moz-transform: translateY(-100%); /* Firefox bug fix */
 -webkit-transform: translateY(-100%); /* Firefox bug fix */
 transform: translateY(-100%);      
 }
 100% { 
 -moz-transform: translateY(100%); /* Firefox bug fix */
 -webkit-transform: translateY(100%); /* Firefox bug fix */
 transform: translateY(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div>

Answer 1

您的动画立即开始，但您从-100％开始。

如果要从顶部开始，则将每个关键帧从-100％更改为0。如果您想从顶部向下滚动，请尝试将其更改为与文本行高度（-50px）相等。

<!DOCTYPE html> <title>Example</title>

<!-- Styles -->
<style>
  .example3 {
    height: 200px;
    overflow: hidden;
    position: relative;
  }
  .example3 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;
    /* Starting position */
    -moz-transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    /* Apply animation to this element */
    -moz-animation: example3 15s linear infinite;
    -webkit-animation: example3 15s linear infinite;
    animation: example3 15s linear infinite;
  }
  /* Move it (define the animation) */
  @-moz-keyframes example3 {
    0% {
      -moz-transform: translateY(-50px);
    }
    100% {
      -moz-transform: translateY(100%);
    }
  }
  @-webkit-keyframes example3 {
    0% {
      -webkit-transform: translateY(-50px);
    }
    100% {
      -webkit-transform: translateY(100%);
    }
  }
  @keyframes example3 {
    0% {
      -moz-transform: translateY(-50px); /* Firefox bug fix */
      -webkit-transform: translateY(-50px); /* Firefox bug fix */
      transform: translateY(-50px);
    }
    100% {
      -moz-transform: translateY(100%); /* Firefox bug fix */
      -webkit-transform: translateY(100%); /* Firefox bug fix */
      transform: translateY(100%);
    }
  }
</style>

<!-- HTML -->
<div class="example3"><h3>Scrolling down...</h3></div>

Answer 2

你需要调整动作。

我已经使用您拥有的解决方案设置了3个示例：第一个位置，第二个位置和动画。

然后，另外3个示例带有可能的解决方案，包括初始状态，最终状态和动画。

我删除了溢出：隐藏，并将元素涂成半透明的颜色，以便很容易看到发生了什么

.example {
  height: 200px;
  width: 100px;
  position: relative;
  border: solid 1px;
  margin-top: 200px;
  display: inline-block;
}

.example h3 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  background-color: rgba(200, 200, 255, 0.7);
}

#ex1 h3 {
    transform: translateY(-100%);
}
#ex2 h3 {
    transform: translateY(100%);
}

#ex3 h3 {
  animation: example 15s linear infinite;
}
@keyframes example {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
#ex4 h3 {
    top: -32px;
}
#ex5 h3 {
    top: -20px;
    transform: translateY(100%);
}
#ex6 h3 {
  animation: example2 15s linear infinite;
}
@keyframes example2 {
  0% {
    transform: translateY(-32px);
  }
  100% {
    transform: translateY(calc(-20px + 100%));
  }
}

<div class="example" id="ex1">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex2">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex3">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex4">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex5">
  <h3>Scrolling</h3>
</div>
<div class="example" id="ex6">
  <h3>Scrolling</h3>
</div>

Answer 3

您可以使用CSS Position实现此目的

通过将父容器设置为relative，将子元素设置为absolute，可以无延迟地获得选取框效果。

下面是一个示例代码段，进一步说明您希望在选框中发生什么。在这里，我们使用的位置：相对;到父类换行以使位置：绝对; marquee元素h4将其识别为其父级。

转到关键帧，我们将h4的位置设置为顶部：0％使其在开始和顶部处于容器上方：calc（100％ - 18px）;在它的高峰期。

为什么我们需要在这里使用calc（）？

基本上只向其峰值位置添加100％将溢出父元素外的选取框，从而导致奇怪的行为。

为什么计算钙（100％ - 18px）？

18px是你添加到元素中的每个文本的默认字体大小，我们将选框的css设置为padding：0;和margin：0来删除内外的额外空格，使得选框看起来像我们有启动延迟，因为我们只看到空白空间没有被选框内的文本占据;

.wrap {
  position: relative;
  height: 150px;
  width: 100px;
  background: gray;
}

.wrap h4 {
  text-align: center;
  position: absolute;
  top: 0%;
  left: 0%;
  padding: 0;
  margin: 0;
  background-color: red;
  width: 100%;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-moz-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

@-webkit-keyframes marquee {
  0% {
    top: 0%;
  }
  100% {
    top: calc(100% - 18px);
  }
}

<div class="wrap">
  <h4>Oopsie</h4>
</div>

无法使CSS3动画连续

问题描述投票：0回答：3

3个回答

最新问题

无法使CSS3动画连续

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3