[原]CSS  Animate 动画实现结束后…

最新推荐文章于 2021-09-10 10:08:07 发布
最新推荐文章于 2021-09-10 10:08:07 发布
阅读量477 收藏
点赞数
分类专栏： css笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandarawen/article/details/8149924
版权
道理很简单，看代码
@-webkit-keyframes btnActive {
0% {
background-color:#999;
color:#FFFFFF;
}
100% {
background-color:#e6e6e6;
color:#999;
}
}
#formLogin input[type=button]:active {
-webkit-animation-name:btnActive;
-webkit-animation-duration:0.3s;
-webkit-animation-timing-function:linear;

background-color:#e6e6e6;
position:relative;
top:1px;
color:#999;
}

或者，设置-webkit-animation-fill-mode为forwards

兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-9.0 4.0 5.1 13.0-16.0 11.50-11.60
版本 10.0 5.0-9.0
详细见css手册： http://css.doyoe.com/properties/animation/animation-fill-mode.htm
PandaraWen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3用AnimationEnd判断动画是否完成， css3在动画完成后执行事件
kongjiea笔记
08-16 8万+
用css3的animation完成一个动画，当只有这个动画完成时才执行令一个事件，比如让动画保持在终止的状态或其他一些事件。我们该怎么办呢。  第一种方法：  用计时器，设定一个和动画时长一样的time，过time事件去执行这个函数。  setTimeout(function(){ },time);  第二种方法：  当-webkit-animation动画结束时有一个webkitAni
js监听 css动画animate 结束
kilito_01的博客
04-20 562
js监听 css动画animate 结束
让css animation 动画停在结束的时候
qq_44845659的博客
09-10 1532
让css animation 动画停在结束的时候 使用css animation的时候经常会想让动画停留在最后一帧，比如鼠标移上的的时候希望往上移动一点，鼠标移开的时候希望再往回移； 可以使用 animation-fill-mode:forwards;进行设置 img{ &:hover{ animation: imgMove 0.3s; animation-fill-mode:forwards; } } @keyframes imgMove { from { transform
css animation动画完成后隐藏_【译】十个推荐的CSS动画库
weixin_39545805的博客
11-22 417
在这篇文章中，我将向你展示目前为止，我发现/遇到的十个优秀的CSS动画库。我大约尝试30种，但是这十种是我找到最好的。请注意，这些库不需要引入JavaScript就可以运行。 再次提醒：整篇文章是通过手机编写的，所以，如果你在电脑或平板下查看，下面的截图看起来并不友好。1.Animista这个站点是我不久前才发现的，但是我立马爱上了她。实话说，它值得被提出。Animasta是一款在线生成器也是一个...
animation动画结束后css样式怎么保留最后状态
捷搜索
09-28 1万+
本文来源于 CSS animation动画之animation-fill-mode特性 问题 css属性animation动画可以轻松地给页面带来很炫很酷的效果，但是有时候我们会遇到这个问题，动画结束后css状态会返回到初始状态，那么这并不是我们想要的，我们希望动画结束后css状态达到最后的模样。 解决方案 为了达到这个效果，可以给个css样式： animation-fill-mode...
浅谈原生JS实现jQuery的animate()动画示例
10-20
5. `func`: 回调函数，动画结束后执行 在`animate()`内部，我们使用`setInterval`创建了一个定时器，每隔`interval`毫秒执行一次动画更新。为了确保每个元素独立执行动画，我们需要为每个元素单独设置定时器，避免...
基于animate.css和原生JS实现的鼠标滚动动画效果.zip
07-11
实现效果： 基于animate.css和原生JS实现的鼠标滚动动画效果，挺不错的CSS3动画效果，基于CSS动画插件 animate.css实现，animate.css拥有众多的动画特效而且是开源的，大家到官网看看吧。
基于css3 animate制作绚丽的动画效果
09-24
在网页设计和开发中，创建引人入胜的动态效果是一项重要的任务，而CSS3的Animate.css库为我们提供了一个简洁高效的方式来实现这一目标。Animate.css是一个预定义的动画集合，支持各种炫酷的视觉效果，如翻转、滑动、...
animate(CSS动画库)
07-15
Animate.css 是一个强大的开源CSS动画库，它提供了一系列预先定义好的动画效果，使得开发者无需从零开始编写复杂的CSS代码，就能轻松实现各种炫酷的动态效果。这个库被广泛应用于网页设计，提升用户体验，吸引用户...
动画库animate.css文字特效特效代码
03-20
Animate.css 是一个流行的开源 CSS 动画库，它为网页设计师和开发者提供了丰富的预定义动画效果，无需编写复杂的 JavaScript 或者使用其他动画框架。这款库特别适用于创建吸引人的文字特效，使得网页元素在用户交互...
监听CSS动画开始与结束状态
帆酱的博客
05-24 5980
在做前端页面时，如果一个页面有多套动画特效依次播放。我们一般才用动画延时播放，延时时间为前面所有动画播放的总和。不过这样做的话有一些弊端：1、如果动画很多的话会让人感觉很累，因为每个动画动摇计算前方动画所运行的时间。2、如果中间某个动画的运行时间进行修改的话，后面所有的动画都需要修改。所以，如果能监听动画结束事件，就可以完美解决。代码如下：<!DOCTYPE html> <htm...
animation动画结束后css样式保留最后状态
peppa_pig的博客
03-24 1354
背景 css属性animation动画结束后css状态会返回到最初始状态，但有时候我们想要的是动画结束后css状态达到最后的模样。 解决方法：添加css样式animation-fill-mode属性 animation-fill-mode:forwards
css3 使用animation 只执行一次然后停留在执行后的状态
热门推荐
淡淡忧桑
04-24 6万+
-webkit-animation:'index' 5s ease-in-out 0 1 alternate forwards; forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 @-webkit-keyframes 'index'{    0%{   left:0%; }    50%{  left:50%;     }    100%{
animate动画执行一次（animation-iteration-count）并且停留在最后一帧（animation-fill-mode）
weixin_42450794的博客
08-30 1万+
今天在做公司9周年H5动画的时候遇到了一点问题，之前写动画都是这么写的： animation:rotateScale 3s infinite; -moz-animation:rotateScale 3s infinite; /* Firefox */ -webkit-animation:rotateScale 3s infinite; /* Safari and Chr...
使用animate.css完成动画效果
albert48的博客
12-05 229
<!DOCTYPE html> <html> <head> <title>TodoList</title> <script src="./vue.js"></script> <link rel="stylesheet" type="text/css" href="./animate.css"> &...
[转]CSS实现背景图片部分显示
PandaraWen 宝盒
11-05 1006
原文：http://hbiao68.iteye.com/blog/1407337 如果在页面山有很多小图标，可以把它们集中到一张图片当中。 实现原理：根据CSS样式，选择背景图片坐标位子，就能准确定位出显示的图片 优点：避免了维护多个文件，只需要管理一个图片文件    显示的效果全部由CSS控制 缺点：一次需要下载相对较大的图片，浪费流量，加大了代码的难度   Js代码  htm
animate.css 动画完成后
最新发布
09-15
animate.css是一个非常流行的CSS动画库，它提供了许多动画效果，可以轻松地为网页添加动画效果。当animate.css动画完成后，会触发一个名为"animationend"的事件。 在动画完成后，我们可以利用这个事件来执行一些其他的动作或调整其他元素的样式。例如，我们可以通过JavaScript来监听"animationend"事件然后执行一些自定义的操作。 例如，当动画完成后，我们可以移除或隐藏该元素，或者根据需要修改它的样式。我们可以使用JavaScript的DOM操作方法来实现这些操作。 示例代码如下： ``` const element = document.getElementById("animatedElement"); // 监听animationend事件 element.addEventListener("animationend", function() { // 在动画完成后执行一些操作 element.style.display = "none"; }); ``` 在上面的示例中，我们将一个元素绑定到一个具有id为"animatedElement"的HTML元素。当该元素执行完成动画后，"animationend"事件将触发，并隐藏这个元素。 总之，animate.css为我们提供了快速方便的CSS动画效果，并且我们可以通过监听"animationend"事件来在动画完成后执行自定义的操作。通过使用这个事件，我们可以进一步提高用户体验，并实现更丰富的交互效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值