CSS3 animation-fill-mode 属性
CSS3 animation-fill-mode属性指定CSS动画在执行之前和之后,如何将样式应用于其目标。
下表总结了此属性的用法上下文和版本历史记录。
none |
所有元素::before和::after 伪元素 |
没有 |
否。请参见 动画属性。 |
CSS3的新功能 |
object.style.animationFillMode="forwards" |
animation-fill-mode的使用语法
该属性的语法如下:
animation-fill-mode: none | forwards | backwards | both | initial | inherit
下面的示例演示了如何使用animation-fill-mode属性。
示例
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation-name: moveit;
-webkit-animation-duration: 4s;
-webkit-animation-fill-mode: forwards;
/* Standard syntax */
animation-name: moveit;
animation-duration: 4s;
animation-fill-mode: forwards;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
/* Standard syntax */
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
测试看看‹/›
属性值
下表描述了此属性的值。
none | 动画在执行之前或之后不会对目标应用任何样式。 |
forwards | 动画结束后(由决定animation-iteration-count),动画将在动画结束时应用属性值。 |
backwards | 动画将应用在关键帧中定义的属性值,该关键帧将由animation-delay属性定义的时间段内开始动画的第一次迭代。这些是from关键帧的值(animation-direction为normal或时alternate)或to关键帧的值(animation-direction为reverse或时alternate-reverse)。 |
both | 动画将遵循向前和向后的规则,从而在两个方向上扩展了动画属性。 |
initial | 将此属性设置为其默认值。 |
inherit | 如果指定,则关联元素采用其父元素animation-fill-mode属性的计算值。 |
浏览器兼容性
animation-fill-mode属性浏览器的兼容性,所有主流浏览器均支持该属性。
|
进一步阅读
https://www.nhooo.com/css-reference/css3-animation-fill-mode-property.html
请参考以下教程:CSS3动画。
相关属性和规则: animation,animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-play-state,@keyframes。
相关推荐
`animation`属性是CSS3 Animation的核心,它是一个复合属性,可以包含多个子属性,如`animation-name`、`animation-duration`、`animation-timing-function`等。以下是一个完整的`animation`声明示例: ```css div ...
【CSS3 Animation属性详解】 CSS3的Animation属性是现代网页设计中的一个重要工具,它使得开发者能够创建复杂的动态效果,如平滑的过渡、动画序列等,而无需依赖JavaScript或者其他外部库。在本案例中,我们将深入...
在CSS3中,`animation`属性是一个强大的工具,它允许我们创建复杂的动态效果,比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力,还能提供更好的交互体验。接下来,我们将深入...
7. **animation-fill-mode**: 定义元素在动画之外的状态,如`none`、`forwards`、`backwards`、`both`。 8. **animation-play-state**: 控制动画是否正在运行或暂停。 **三、浏览器兼容性** CSS3动画在现代浏览器...
7. **animation-fill-mode**: 决定动画在开始前和结束后如何填充时间,常见的值有`none`、`forwards`、`backwards`和`both`。 **三、应用场景** 1. **过渡效果**: 如淡入淡出、滑动等,增强用户体验。 2. **加载...
`animation`属性是多个相关属性的简写形式,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill...
name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-direction`、`animation-iteration-count`、`animation-fill-mode`和`animation-play-state`等属性,我们可以精确控制...
用于设置多个与动画相关的属性,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`和`...
在本文中,我们将深入探讨如何使用CSS3的`animation`属性来创建一个旋转的文字动画切换效果。CSS3作为现代网页设计的重要工具,提供了丰富的动画功能,让我们能够无需JavaScript即可实现动态视觉效果。以下是对这个...
在本案例中,我们关注的是CSS3的`animation`属性,它允许我们创建复杂的动态效果,如“纯css3 animation属性圆形动态时钟特效”。这个特效通过CSS3的动画功能,实现了一个逼真的圆形时钟,时针、分针和秒针都在不断...
这个“CSS3 Animation属性发光按钮代码.zip”文件内包含的是一段利用CSS3动画效果实现的发光按钮代码。由于Firefox浏览器对某些CSS3动画的兼容性问题,这个代码可能在Firefox上无法完美运行。 CSS3动画是通过`@...
CSS3的animation属性是一组属性的简写形式,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill...
CSS3提供了几个属性来控制动画的行为,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode...
css代码 框架css .animated { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both;
name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`和`animation-play-state`等多个属性。通过这些属性,...
`animation`属性是由多个子属性组成的,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-...
我们关注CSS3的`animation`属性,它包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`和`animation-fill-mode`等...
`animation`属性通常包括以下几个子属性:`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-direction`、`animation-iteration-count`、`animation-fill-mode`...
离开按钮后,动画会按照预设的`animation-fill-mode`属性恢复到初始状态。 **四、项目结构** - **index.html**:主页面,包含HTML结构和引入的CSS、JavaScript资源。 - **readme.html**:可能包含项目的介绍、使用...
CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载...3、利用了animation-fill-mode和animation的样式设置,针对动画设置了transform的角度旋转动画rotate设置。 更多资源分享可以看我的主页