css3动画保持状态不变

css3动画在动作结束时保持该状态不变的解决办法

animation-fill-mode : none | forwards | backwards | both;

1、none：不改变默认行为。

2、forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。

3、backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

4、both：向前和向后填充模式都被应用。

CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素，比如下面的例子，0.3s播放完动画之后元素会停留在0的位置，而不是100px的位置，而且元素是红色的。

<head><style>@keyframes move {0% {transform: translate3d(0, 0, 0);background: green;}100% {transform: translate3d(100px, 0, 0);background: yellow;}}.box {width: 100px;height: 100px;background: red;animation: move 0.3s;}
</style>
</head>
<body><div class="box"></div>
</body>

animation-fill-mode 属性能够覆盖这种行为。

在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。

下面的例子让 <div> 元素在动画结束时保留来自最后一个关键帧的样式值，元素最后停留在100px的位置，而且元素是红色的。

.box {width: 100px;height: 100px;background: pink;animation: move 0.3s;animation-fill-mode: forwards;
}

下面的例子在动画开始之前（在动画延迟期间）使 <div> 元素获得由第一个关键帧设置的样式值：

<head><style>@keyframes move {0% {transform: translate3d(0, 0, 0);background: green;}100% {transform: translate3d(100px, 0, 0);background: yellow;}}.box {width: 100px;height: 100px;background: red;animation: move 0.3s;animation-delay: 2s;animation-fill-mode: backwards;}
</style>
</head><body><div class="box"></div>
</body>

动画设置的delay延迟时间是2s，所以动画之前先由红色变成绿色，然后2s之后开始动画从绿色变成黄色经过0.3s。由于backwards是开始应用第一帧，所以动画结束之后又会变成红色然后回到0的位置。

下面的例子在动画开始之前使 <div> 元素获得第一个关键帧设置的样式值，以及在动画结束时保留最后一个关键帧的样式值：

<head><style>@keyframes move {0% {transform: translate3d(0, 0, 0);background: green;}100% {transform: translate3d(100px, 0, 0);background: yellow;}}.box {width: 100px;height: 100px;background: red;animation: move 0.3s;animation-delay: 2s;animation-fill-mode: both;}
</style>
</head><body><div class="box"></div>
</body>

设置了both属性，动画之前先由红色变成绿色，然后2s之后开始动画从绿色变成黄色经过0.3s，最后停留在100px的位置，元素也是黄色的。

css3动画保持状态不变相关推荐

html 语言 gif 动画,动效篇（1）－－从简单CSS3动画片段代码，到生成gif动图～
简单css动画片段代码(最终效果 ) (一)请自行下载安装Dreamweaver 在Dreamweaver编写代码(如需参考请复制下列代码) (二)HTML CSS代码详解css代码(/*详解*/) ...
css怎么动画中该透明度,通过css3动画和opacity透明度实现呼吸灯效果
本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: 呼吸灯 /*也可以通过加层罩,通过设置层罩透明度来实现亮度动画*/ body{ background-co ...
小猿圈自学web前端之CSS3动画练习案例：用CSS3做个钟表
前段时间发的五子棋的游戏很多小伙伴都私聊让再做个,今天小猿圈web前端讲师为大家分享的是CSS3动画练习案例:用CSS3做个钟表,想玩的小伙伴记得自己运行一下呦. 自学CSS3属性之后,我们来用一个小 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
贝塞尔曲线与CSS3动画、SVG和canvas的应用
简介贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfe ...
css3动画之——动态的省略号
css3动画之--动态的省略号今天学习了CSS3动画,涉及到的属性:@keyframes,animation,animation-duration,animation-name,animation- ...
一个栗子上手CSS3动画
最近杂七杂八的事情很多,很多知识都没来得及总结,是时候总结总结,开启新的篇章- 本篇文章不一一列举CSS3动画的属性,若需要了解API,可前往 MDN 在开始栗子前,我们先补补基础知识. css3动画 ...
css3动画-animation
css3动画-animation animation 属性是 8 个属性的简写: 你是否被gif loading加载太慢或有锯齿而感到困扰? 项目中,当页面内容或图片比较多或在加载一些比较大的数据接口 ...

css3动画保持状态不变

css3动画保持状态不变相关推荐

最新文章

热门文章