使用 CSS/JS 洗牌文本动画？答案

【问题标题】：Shuffling Text Animation with CSS/JS?使用 CSS/JS 洗牌文本动画？
【发布时间】：2021-05-27 00:48:22
【问题描述】：

我想在网站的主页上显示单词“Hello”。我使用 CSS 在页面开始加载时进行“Hello”过渡。我想实现一个随机播放的动画，在不同语言的单词 Hello 之间随机播放。我想用一个动画来做到这一点，当“你好”在开始时向上滑动时，“你好”向上滑动更多，淡出并消失。当这种情况发生时，例如“Bonjour”从下方滑出并发生。我想象这会永远重复。

有没有办法使用 CSS、JavaScript、Jquery 或任何其他网络工具来实现此类动画？下面是我的 HTML、CSS 和 JS 结构，它只在页面加载时实现初始转换：

<body>
  <section>
    <h1 id="switch">Hello</h1>
  </section>
</body>

section {
    text-align: left;
}
section h1 {
    font-size: 100px;
    font-weight: 420;
    position: absolute;
    top: 130px;
    left: 200px;

    opacity: 0;
    transform: translateY( 43px );
    animation-name: fade-in;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

var currentIndex = 0;
var hello = new Array( 'Hello', 'Bonjour', 'Hola' );

function randomIndex( ) { 
    return Math.floor( Math.random( ) * hello.length);
};

window.setInterval( function( ) {
    var newIndex = randomIndex( );
    while( newIndex === currentIndex ) newIndex = randomIndex();
    currentIndex = newIndex;
    document.getElementById("switch").textContent = hello[ currentIndex ]; 
}, 2300 );

【问题讨论】：

标签： javascript html jquery css frontend

【解决方案1】：

在 CSS 中，您需要为您的 fade-in 设置 @keyframes动画。然后，您可以添加 percentage 您希望为 animate-able 属性 opacity设置动画的持续时间> 和顶部位置。确保您的持续时间与 setInterval 时间 => 2300 => 2.3s 匹配。

@keyframes:

在我的示例中，我设置了一个补间，该补间将从 0% 开始，opacity 0 和 top position vh 长度，然后当补间到达70%，它显示向上移动到5vh，它将停留在那里在1 直到90% 的不透明度，当它的不透明度将开始消失出来。在100%，它将是0 的不透明度，然后循环重新开始，因为它在css 动画中设置为infinte，元素将重置为20vh 并且动画再次重复。

*您可以使用@keyframes 规则中的百分比来获得您在淡入和淡出运动等方面寻找的效果......

let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];

function randomIndex() {
  return ~~(Math.random() * hello.length);
};

window.setInterval(function() {
  let newIndex = randomIndex();
  while (newIndex === currentIndex) newIndex = randomIndex();
  currentIndex = newIndex;
  document.getElementById("switch").textContent = hello[currentIndex];
}, 2300);

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  text-align: center;
}

section h1 {
  font-size: 100px;
  font-weight: 420;
  position: absolute;
  top: 5vh;
  left: 50vh;
  opacity: 0;
  animation: fade-in 2.3s ease-in-out forwards infinite;
}

@keyframes fade-in {
  0% {
    opacity: 0;
    top: 20vh;
  }
  70%,
  90% {
    opacity: 1;
    top: 5vh;
  }
  100% {
    opacity: 0;
    top: 5vh;
  }
}

<body>
  <section>
    <h1 id="switch">Hello</h1>
  </section>
</body>

【讨论】：

【解决方案2】：

由于问候语不是真正的语义（例如，您不希望它每隔几秒钟向屏幕阅读器朗读一次），您可以将其放在正文（或其他合适的元素，具体取决于您想要的结构) 在伪前元素中。这样它基本上是装饰，而不是意义。

另外，为了避免时间问题，其中 setInterval 可能与关键帧动画的时间不同步，您可以感应 animationend 事件，然后设置下一个 300 毫秒的超时，然后重置动画以再次运行。

let currentIndex = 0;
const hello = ['Hello', 'Bonjour', 'Hola'];

function randomIndex() {
  return ~~(Math.random() * hello.length);
};

function getNext() {
  let newIndex = randomIndex();
  while (newIndex === currentIndex) newIndex = randomIndex();
  currentIndex = newIndex;
  document.body.style.setProperty('--greeting', "'" + hello[currentIndex] + "'");
  document.body.style.setProperty('--animationname', 'none');
  setTimeout(function () {
    document.body.style.setProperty('--animationname', 'move');
  }, 300);
}
document.body.addEventListener('animationend',getNext);

body {
  --greeting: 'Hello';
  --animationname: move;
}
body::before {
  content: var(--greeting);
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-name: var(--animationname);
  position: absolute;
  top: 100%;
  font-size: 100px;
  font-weight: 420;
  position: absolute;
  left: 200px;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    top: 100%;
    opacity: 0;
  }
  50% {
    top: 50%;
    opacity: 1;
  }
  100% {
    top: 0%;
    opacity: 0;
  }
}

显然，您需要将时间、位置等更改为您想要的。

【讨论】：