javascript显示单词并顺利地为它们制作动画

Question

我构建的东西应该随机显示单词并为它们设置动画。

我想要的是平滑缩放动画和平滑淡出（模糊）动画。

我几乎将其存档但看起来并不顺畅，我很乐意将Greensock与TweenMax集成在一起。有人能帮我整合TweenMax吗？ [

var interval = 600;
var width = 800;
var height = 300;

var words = [
  'Liberty',
  'Morality',
  'Modesty',
  'Curiosity',
  'Imagination',
  'Excitement',
  'Structure',
  'Intellect',
  'Friendliness',
  'Conversation'
];
var wordPlacementInterval = setInterval(function() {
  var currentWord = words.shift();
  if (currentWord) {

    var word = document.createElement('span');

    word.innerHTML = currentWord;
    word.style.top = Math.floor((Math.random() * height) + 1) + 'px';
    word.style.left = Math.floor((Math.random() * width) + 1) + 'px';
    document.body.appendChild(word);
    document.querySelector('#wordcloud').appendChild(word);
  } else {
    clearInterval(wordPlacementInterval);
  }
}, interval);


//Something like this ? how can I implement this?
var scale_tween = TweenMax.to('span', 1, {
  transform: 'scale(.75)',
  ease: Linear.easeNone
});

#wordcloud span {
  text-align: center;
  font-size: 3rem;
  opacity: 1;
  display: inline-block;
  transform-origin: bottom;
  transition: all 500ms ease-in-out;
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translate3d(-0%, -0%, 0);
  color: #565656;
}

#wordcloud span:nth-child(1) {
  animation: letterspacing1 5s infinite alternate;
  transition-delay: .1s;
}

#wordcloud span:nth-child(2) {
  animation: letterspacing2 5s infinite alternate;
  transition-delay: .5s;
}

#wordcloud span:nth-child(3) {
  animation: letterspacing3 5s infinite alternate;
  transition-delay: 1.04s;
}

#wordcloud span:nth-child(4) {
  animation: letterspacing4 5s infinite alternate;
  transition-delay: .9s;
}

#wordcloud span:nth-child(5) {
  animation: letterspacing5 5s infinite alternate;
  transition-delay: .6s;
}

#wordcloud span:nth-child(6) {
  animation: letterspacing6 5s infinite alternate;
  transition-delay: 1.6s;
}

#wordcloud span:nth-child(7) {
  animation: letterspacing7 5s infinite alternate;
  transition-delay: .7s;
}

#wordcloud span:nth-child(8) {
  animation: letterspacing8 5s infinite alternate;
  transition-delay: 1.8s;
}

#wordcloud span:nth-child(9) {
  animation: letterspacing9 5s infinite alternate;
  transition-delay: 2.3s;
}

#wordcloud span:nth-child(10) {
  animation: letterspacing10 5s infinite alternate;
  transition-delay: 1s;
}

@keyframes letterspacing1 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing3 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing4 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing5 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing6 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing7 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing8 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing9 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

@keyframes letterspacing10 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    filter: blur(0rem);
  }
  100% {
    opacity: 0;
    transform: scale(1.1);
    letter-spacing: 2px;
    filter: blur(0.2rem);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wordcloud"></div>