在最后一帧停止CSS3动画

Question

我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下.

但是,它一旦播放就会回到原来的状态.任何人都知道如何在最后一个css帧(100%)上停止它,或者如何摆脱它曾经玩过的整个div.

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

Answer 1

您正在寻找:

animation-fill-mode: forwards;

有关canIuse 上的MDN和浏览器支持列表的更多信息.

Answer 2

如果要将此行为添加到速记animation属性定义,则子属性的顺序如下所示

animation-name- 默认 none

animation-duration- 默认 0s

animation-timing-function- 默认 ease

animation-delay- 默认 0s

animation-iteration-count- 默认 1

animation-direction- 默认 normal

animation-fill-mode- 你需要将其设置为 forwards

animation-play-state- 默认 running

因此,在最常见的情况下,结果将是这样的

animation: colorchange 1s ease 0s 1 normal forwards;

请在此处查看MDN文档

Answer 3

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

浏览器支持

• Chrome 43.0(4.0 -webkit-)
• IE 10.0
• Mozilla 16.0(5.0 -moz-)
• Shafari 4.0 -webkit-
• Opera 15.0 -webkit-(12.112.0 -o-)

用法:-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Answer 4

最好的方法似乎是将最终状态置于css的主要部分.就像在这里一样,我把宽度放到了220px,所以最终变成了220px.但是开始0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}