css3动画不断恢复到原始状态答案

【问题标题】：css3 animation keep reverting to original statecss3动画不断恢复到原始状态
【发布时间】：2013-08-29 17:31:04
【问题描述】：

使用 CSS 3 动画，但由于某些原因，所有动画在执行后都会返回到其原始状态。

在这种情况下，我希望图像在动画后保留在 scale(1)，而我的文本仅在 img 动画后出现但之后保留。

.expanding-spinning {
   -webkit-transform: scale(.4);
   -webkit-transition-timing-function: ease-out;
   -webkit-transition-duration: 500ms;
   animation-duration: 500ms;
}

.expanding-spinning {
  -webkit-animation: spin2 1.4s ease-in-out alternate;
  animation: spin2 1.4s ease-in-out alternate;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes spin2 {
  0% { -webkit-transform: rotate(0deg) scale(.4);}
  100% { -webkit-transform: rotate(360deg) scale(1);}
}
@-keyframes spin2 {
  0% { transform: rotate(0deg) scale(.4);}
  100% { transform: rotate(360deg) scale(1);}
}

@-webkit-keyframes fadeInFromNone {
  0% {
    display:none; 
    opacity: 0;
  }

  100% {
    display: block; 
    opacity: 1;
  }
}

.slogan {
  display: block;
  opacity: 1;
  -webkit-animation-duration: 2s;
  -webkit-animation-name: fadeInFromNone;
  -webkit-animation-delay: 3.5s;
}

Fiddle code

【问题讨论】：

你的动画根本不起作用！

标签： css animation

【解决方案1】：

您需要将规则-webkit-animation-fill-mode: forwards; 添加到您的动画中。

另外，关于文本动画：动画 visibility 属性而不是 display 属性

FIDDLE

.expanding-spinning {
  -webkit-animation: spin2 1.4s ease-in-out;
  -moz-animation: spin2 1.4s linear normal;
  -o-animation: spin2 1.4s linear;
  -ms-animation: spin2 1.4s linear;
  animation: spin2 1.4s ease-in-out alternate;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
    -webkit-animation-fill-mode: forwards; /* <--- */
}
@-webkit-keyframes fadeInFromNone {
    0% {
        visibility:hidden; 
        opacity: 0;
    }

    100% {
        visibility: visible; 
        opacity: 1;
    }
}

.slogan {
    visibility:hidden;
    opacity: 1;
    -webkit-animation-duration: 2s;
    -webkit-animation-name: fadeInFromNone;
    -webkit-animation-delay: 3.4s;
    -webkit-animation-fill-mode: forwards; /* <--- */
}

查看this article 了解所有动画属性的详细说明

填充模式。如果设置为向前，则最后一个关键帧保持在动画结束，

（来自上面的链接）

【讨论】：

非常感谢@Danield