[原]CSS Animate 动画实现结束后…
2012-11-05 17:43
627 查看
道理很简单,看代码
@-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
浅绿 = 支持
红色 = 不支持
墨绿 = 部分支持
橙色 = 实验性质
详细见css手册:http://css.doyoe.com/properties/animation/animation-fill-mode.htm
@-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动画实现 Animate.css使用方法
- CSS 实现 LI 鼠标…
- 使用Animate.css和wow.js,实现各大网站常用的页面加载动画
- vue2.0使用animate.css动画,transition&transition-group
- CSS 3 的动画功能
- css3动画库——animate.css以及css3动画一些有趣的实现
- jquery结合animate.css 动画效果的实现
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- css 实现的简单的图片…
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
- html5-- JQuery动画Animate
- 【开机动画】原创 - 熊…
- 【开机动画】原创-2013 美少…
- 【开机动画】原创-金泫雅- 《…
- Sql Server 触发器实现多表…
- listview 中实现 checkb…
- css3效果:animate实现点点点loading动画效果(二)
- 【开机动画】韩国美女组合 Gi…
- 【开机动画】原创-鸟叔PSY -…