在最后一帧停止CSS3动画
在最后一帧停止CSS3动画
提问于 2010-12-05 23:55:07
我有一个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); }
}回答 8
Stack Overflow用户
发布于 2010-12-06 11:31:38
Stack Overflow用户
发布于 2017-08-21 17:59:43
如果要将此行为添加到速记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;Stack Overflow用户
发布于 2017-10-17 13:04:18
-webkit-动画-填充模式:转发；/* Safari4.0- 8.0 */动画-填充模式:转发；
浏览器支持
- Chrome 43.0 (4.0 -moz-)
- Shafari 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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4359627
复制相关文章
相似问题