时间戳

首页 > 解决方案 > 我需要帮助组合 CSS 动画

html - 我需要帮助组合 CSS 动画

问题描述

我对 HTML 和 CSS 还是很陌生，所以我的很多代码都很糟糕。我需要帮助弄清楚如何组合我创建的两个动画。我希望第一个动画（当前位于顶部）完全播放，然后在大约 3 秒后，第二个动画向左缓慢滚动，然后播放并保持隐藏状态。

这是我的代码

body {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 22px;
  font-size: 18px;
  width: 1200px;
  /* color: ##FFFFFF    ;
  background: #000000; */
  overflow: hidden;
}

.text {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 20px;
  font-size: 18px;
  width: 900px;
}

.fadingEffect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation: show 5s ease-in;
  animation-fill-mode: forwards;
  /* animation-delay: 1s; */
}

.item {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
  animation-duration: 12s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.item {
  animation-name: anim-1;
}

@keyframes show {
  0% {width:100%}
  100% {width:0%;}
}

@keyframes anim-1 {
  0%,50% { left: 0%; opacity: 1; }
  50%,90% { left: 0%; opacity: 1; }
  90%, 100% { left: -100%; opacity: 0; }
}
<div class="text">
  <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
  <link href="faded.css" rel="stylesheet" type="text/css">
  <link href="slide.css" rel="stylesheet" type="text/css"> Defeat all of the enemies!
  <p class="item">Defeat all of the enemies!</p>
  <div class="fadingEffect"></div>
</div>

标签： htmlcsscss-animationscss-transitions

解决方案

我将文本放在 a<div>中以完成这项工作。

这是我为了让动画正常工作而添加的主要 CSS。

white-space: nowrap;（这使得当 div 很小时文本不会换行。） overflow: hidden;（这会隐藏 div 之外的文本。因此，当您扩展 div 的宽度时，它会显示文本。）

您可以使用 %s 和动画持续时间来使其更快或更慢，具体取决于您要查找的内容。

body {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 22px;
  font-size: 18px;
  width: 1200px;
  /* color: ##FFFFFF    ;
  background: #000000; */
  overflow: hidden;
}

.text {
  font-family: 'Aldrich', sans-serif;
  position: relative;
  line-height: 20px;
  font-size: 18px;
  width: 900px;
}

.item {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  color: black;
  white-space: nowrap;
  overflow: hidden; 
  width: 100%;
  height: auto;
  animation: show 10s ease-in;
  animation-fill-mode: forwards;
}

@keyframes show {
  0% {width:0%; left: 0%}
  30% {width:100%;}
  55% { left: 0%; opacity: 1; }
  100% { left: -100%; opacity: 0; }
}
<div class="text">
  <link href="https://fonts.googleapis.com/css2?family=Aldrich&display=swap" rel="stylesheet">
  <link href="faded.css" rel="stylesheet" type="text/css">
  <link href="slide.css" rel="stylesheet" type="text/css">
  <div class="item"><p>Defeat all of the enemies!</p></div>
</div>

推荐阅读