`
fuhsea
  • 浏览: 4487 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

CSS3 animation-fill-mode 属性

css 
阅读更多

CSS3 animation-fill-mode 属性

CSS3 animation-fill-mode属性指定CSS动画在执行之前和之后,如何将样式应用于其目标。

下表总结了此属性的用法上下文和版本历史记录。

默认值: 适用于: 继承: 可动画制作: 版本: JavaScript 语法:   
none
所有元素::before和::after 伪元素
没有
否。请参见 动画属性
 CSS3的新功能
 object.style.animationFillMode="forwards"

animation-fill-mode的使用语法

该属性的语法如下:

animation-fill-mode: none | forwards | backwards | both | initial | inherit

下面的示例演示了如何使用animation-fill-mode属性。

示例
.box {
    width50px;
    height50px;
    background: red;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration4s;
    -webkit-animation-fill-mode: forwards;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration4s;
    animation-fill-mode: forwards;
}
 
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left0;}
    to {left50%;}
}
 
/* Standard syntax */
@keyframes moveit {
    from {left0;}
    to {left50%;}
}
测试看看‹/›

属性值

下表描述了此属性的值。

值 描述
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属性浏览器的兼容性,所有主流浏览器均支持该属性。

 
  • Firefox 5+ -moz-,15 +

  • Google Chrome 4+ -webkit-

  • Internet Explorer 10+

  • Apple Safari 4+ -webkit-

  • Opera 12+ -o-,15+ -webkit-

进一步阅读

https://www.nhooo.com/css-reference/css3-animation-fill-mode-property.html

请参考以下教程:CSS3动画

相关属性和规则:   animationanimation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-play-state@keyframes

分享到:
评论

相关推荐

    Css3 animation---介绍如何实现css的动画

    `animation`属性是CSS3 Animation的核心,它是一个复合属性,可以包含多个子属性,如`animation-name`、`animation-duration`、`animation-timing-function`等。以下是一个完整的`animation`声明示例: ```css div ...

    CSS3 animation属性制作逼真的大风车旋转动画

    【CSS3 Animation属性详解】 CSS3的Animation属性是现代网页设计中的一个重要工具,它使得开发者能够创建复杂的动态效果,如平滑的过渡、动画序列等,而无需依赖JavaScript或者其他外部库。在本案例中,我们将深入...

    css3弹力球动画animation属性制作3D弹力球弹跳动画效果

    在CSS3中,`animation`属性是一个强大的工具,它允许我们创建复杂的动态效果,比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力,还能提供更好的交互体验。接下来,我们将深入...

    CSS3-animation(动画)_Animation_css_

    7. **animation-fill-mode**: 定义元素在动画之外的状态,如`none`、`forwards`、`backwards`、`both`。 8. **animation-play-state**: 控制动画是否正在运行或暂停。 **三、浏览器兼容性** CSS3动画在现代浏览器...

    css3-animation

    7. **animation-fill-mode**: 决定动画在开始前和结束后如何填充时间,常见的值有`none`、`forwards`、`backwards`和`both`。 **三、应用场景** 1. **过渡效果**: 如淡入淡出、滑动等,增强用户体验。 2. **加载...

    纯css3 animation动画属性点击loading加载动画

    `animation`属性是多个相关属性的简写形式,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill...

    纯css3 animation动画属性点击loading加载动画提示框效果代码.zip

    name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-direction`、`animation-iteration-count`、`animation-fill-mode`和`animation-play-state`等属性,我们可以精确控制...

    CSS3 animation动画

    用于设置多个与动画相关的属性,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`和`...

    纯css3 animation属性制作旋转文字动画切换效果

    在本文中,我们将深入探讨如何使用CSS3的`animation`属性来创建一个旋转的文字动画切换效果。CSS3作为现代网页设计的重要工具,提供了丰富的动画功能,让我们能够无需JavaScript即可实现动态视觉效果。以下是对这个...

    纯css3 animation属性圆形动态时钟特效

    在本案例中,我们关注的是CSS3的`animation`属性,它允许我们创建复杂的动态效果,如“纯css3 animation属性圆形动态时钟特效”。这个特效通过CSS3的动画功能,实现了一个逼真的圆形时钟,时针、分针和秒针都在不断...

    CSS3 Animation属性发光按钮代码.zip

    这个“CSS3 Animation属性发光按钮代码.zip”文件内包含的是一段利用CSS3动画效果实现的发光按钮代码。由于Firefox浏览器对某些CSS3动画的兼容性问题,这个代码可能在Firefox上无法完美运行。 CSS3动画是通过`@...

    CSS3 animation超酷网页Loading加载进度条动画效果

    CSS3的animation属性是一组属性的简写形式,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill...

    CSS3动画的集合

    CSS3提供了几个属性来控制动画的行为,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode...

    animatecss框架

    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;

    html5+css3 animation制作各种页面过渡切换动画效果

    name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-mode`和`animation-play-state`等多个属性。通过这些属性,...

    纯css3 animation绘制轮船和飞机动画特效

    `animation`属性是由多个子属性组成的,包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`、`animation-fill-...

    纯CSS3 animation制作扁平风格动态天气图标效果

    我们关注CSS3的`animation`属性,它包括`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-iteration-count`、`animation-direction`和`animation-fill-mode`等...

    基于css3 animation实现的方块左右翻转loading页面加载动画特效.zip

    `animation`属性通常包括以下几个子属性:`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`、`animation-direction`、`animation-iteration-count`、`animation-fill-mode`...

    基于CSS3 animation的鼠标滑过按钮特效

    离开按钮后,动画会按照预设的`animation-fill-mode`属性恢复到初始状态。 **四、项目结构** - **index.html**:主页面,包含HTML结构和引入的CSS、JavaScript资源。 - **readme.html**:可能包含项目的介绍、使用...

    纯css实现28种加载loading动态效果

    CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载...3、利用了animation-fill-mode和animation的样式设置,针对动画设置了transform的角度旋转动画rotate设置。 更多资源分享可以看我的主页

Global site tag (gtag.js) - Google Analytics