小白教程
所有教程
关于
Search
172.69.58.94
172.69.58.94
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“Css3 pr animation fill mode”的源代码
本页内容
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:animation-fill-mode}}[[Category:css3 animations|6]] = CSS3 animation-fill-mode 属性 = [[css reference|CSS 参考手册]] 把物体动画地从一个地方移动到另一个地方,并让它停留在那里: <sample title="" desc="" lang="html" hererun="1"> animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */ </sample> <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 3s; animation-iteration-count:2; animation-fill-mode:forwards; /* Safari 和 Chrome */ -webkit-animation:mymove 3s; -webkit-animation-iteration-count:2; -webkit-animation-fill-mode:forwards; } @keyframes mymove { from {top:0px;} to {top:200px;} } @-webkit-keyframes mymove /* Safari 和 Chrome */ { from {top:0px;} to {top:200px;} } </style> </head> <body> <p><strong>注意:</strong>Internet Explorer 9 及其之前的版本不支持 animation-fill-mode 属性。</p> <div></div> </body> </html> </run> == 浏览器支持 == 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 {| class="table table-striped table-hover" ! 属性 ! Chrome ! Internet Explorer / Edge ! Firefox ! Safari ! Opera |- | animation-fill-mode | 4.0 -webkit- | 10.0 | 16.05.0 -moz- | 4.0 -webkit- | 15.0 -webkit-12.112.0 -o- |} == 定义和用法 == animation-fill-mode 属性规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。 默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。 {| class="table table-striped table-hover" |width="50%"| 默认值: |width="50%"| none |- | 继承: | 否 |- | 可动画化: | 否。请参阅 [[css animatable|可动画化(animatable)]]。 |- | 版本: | CSS3 |- | JavaScript 语法: | object.style.animationFillMode="forwards" <run name=""> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小白教程(xiaobai.wang)</title> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 2s 2; /* Safari、Chrome 和 Opera */ -webkit-animation:mymove 2s 1; } @keyframes mymove { from {left:0px;} to {left:200px;} } /* Safari、Chrome 和 Opera */ @-webkit-keyframes mymove { from {left:0px;} to {left:200px;} } </style> </head> <body> <p>点击“尝试一下”按钮,让 DIV 元素在动画完成时保持最后一个关键帧设置的样式:to {left:200px;}。</p> <button onclick="myFunction()">尝试一下</button> <script> function myFunction() { document.getElementById("myDIV").style.animationFillMode = "forwards"; // 针对 Chrome、Safari 和 Opera 的代码 document.getElementById("myDIV").style.WebkitAnimationFillMode = "forwards"; } </script> <p><strong>注意:</strong>针对 Firefox 用户:请确保在动画完成之前点击按钮,否则将不会产生任何效果,因为动画一旦完成不会重新开始。</p> <p><strong>注意:</strong>只有 Firefox 支持 animationFillMode 属性。</p> <div id="myDIV"></div> </body> </html> </run> |} == CSS 语法 == <pre> animation-fill-mode: none|forwards|backwards|both|initial|inherit;</pre> == 属性值 == {| class="table table-striped table-hover" ! 值 ! 描述 |- | none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |- | forwards | 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 |- | backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。 |- | both | 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。 |- | initial | 设置该属性为它的默认值。请参阅 [[css initial|initial]]。 |- | inherit | 从父元素继承该属性。请参阅 [[css inherit|inherit]]。 |} == 相关文章 == CSS3 教程:[[css3 animations|CSS3 动画(Animations)]] [[css reference|CSS 参考手册]]
返回至“
Css3 pr animation fill mode
”。