相关疑难解决方法(0)

我正在opacity: 0;CSS 中设置的一些元素上运行动画.动画类应用于onClick,并且使用关键帧,它将不透明度更改0为1(以及其他内容).

不幸的是,当动画结束时,元素将返回opacity: 0(在Firefox和Chrome中).我的自然思维是动画元素保持最终状态,覆盖其原始属性.这不是真的吗？如果没有,我怎样才能让元素这样做？

代码(不包括前缀版本):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

我正在尝试动画div,以便在页面加载时它具有比例(0,0)和动画比例(1,1).我遇到的问题是,一旦动画生效,div再次缩放为0.我想要的是div以动画比例(1,1)并保持这样.这是我的CSS代码

@-moz-keyframes bumpin {
    0% { -moz-transform: scale(0,0); }
    100%   { -moz-transform: scale(1,1); }
}

.landing .board {
    -moz-transform: scale(0,0);
    -moz-transform-origin: 50% 50%;
}

.landing .board {
    -moz-animation-name: bumpin;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease;
    -moz-animation-delay: 0s;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
}

我究竟做错了什么？

在此先感谢
Mauro

自从我在这里问了问题已经有一段时间了。如果我做错了，请原谅。

我对CSS动画有疑问。我希望我的动画能够不断重复自我，但又不失去最初的效果。但是，似乎我的代码或CSS动画行为中都存在错误。

完成后，首先定义2个旋转动画（旋转，旋转）。循环开始，但是新动画与以前不同。

我的目标是依次在6个框上创建旋转动画，一次创建一个。当所有盒子都旋转时，它们应该开始依次依次恢复到原始状态。

码：

/* -------------------------------------------------------- */
#loader {
  width: 240px;
  height: 100px;
}

.inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 2s;
  transform-style: preserve-3d;
  background-color: transparent;
}

.front,
.back {
  position: absolute;
  width: 80px;
  height: 50px;
  backface-visibility: hidden;
}


/* -------------------------------------------------------- */

#loader1 {
  float: left;
  width: 80px;
  height: 50px;
  perspective: 1000px;
  background-color: transparent;
}

#loader1 .inner …