Question

我有三个云图标，我正在尝试使用CSS动画过渡来移动它们。（动画过渡转换关键帧）但看起来好像不起作用。如果我正在使用transition（transform），则无法使用某些CSS属性（例如position）？想知道这个问题。

tinymce.init({
    selector: '#tinymce-div',

    // Disable branding message, remove "Powered by TinyMCE"
    branding: false
});

Answer 1

如果更改以下CSS，动画将起作用：

animation至animation-name

keyframe至keyframes

#i1 {
  top: 30px;
  left: 100px;
  font-size: 200px;
  color: lightskyblue;
  position: absolute;
  animation-name: cloudmotion;  /* change animation to animation-name */
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in;
}

#i2 {
  top: 50px;
  left: 340px;
  font-size: 100px;
  color: lightskyblue;
  position: absolute;
  animation-name: cloudmotion; /* change animation to animation-name */
  animation-duration: 10s;
  animation-iteration-count: 2;
  animation-timing-function: ease-in;
}

@keyframes cloudmotion {  /* change keyframe to keyframes */
  0% {
    transform: translateX(0px);
    color: gray;
  }
  50% {
    transform: translateX(200px);
  }
  100% {
    transform: translateX(1220px);
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<body>
  <i id="i1" class="fa fa-cloud" aria-hidden="true"></i>
  <i id="i2" class="fa fa-cloud" aria-hidden="true"></i>
  <i id="i3" class="fa fa-cloud" aria-hidden="true"></i>
</body>

CSS动画过渡转换不起作用

1 个答案: