Js点击触发Css3的动画Animations、过渡Transitions效果
2018-02-07 18:12
661 查看
关键是首先指定动画效果的CSS属性名称,然后在Js中改变这个属性
如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发
下例为Js点击触发过渡Transitions效果,指定的属性名称是width
原创文章,欢迎转载,转载请注明出处!
如果不使用Js触发,可以选择利用css的状态:hover,focus,active 来触发,也可以一开始就触发
下例为Js点击触发过渡Transitions效果,指定的属性名称是width
<!DOCTYPE html> <html> <head> <style> #aaa { width: 100px; height: 100px; background: blue; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari and Chrome */ -o-transition: width 2s; /* Opera */ } </style> <script> function big() { document.getElementById("aaa").style.width = "300px"; } function small() { document.getElementById("aaa").style.width = "100px"; } </script> </head> <body> <button onclick="big()">Big</button> <button onclick="small()">Small</button> <div id="aaa"></div> </body> </html>
原创文章,欢迎转载,转载请注明出处!
相关文章推荐
- CSS3中动画效果Transitions与Animations的区别
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- 用js触发CSS3-transition过渡动画
- CSS3变换、过渡、动画效果
- 前端框架vue.js系列(11):元素动画过渡效果
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
- CSS3的过渡效果(transition)与动画(animation)
- CSS3 过渡效果触发时机的问题
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
- CSS3制作各种平滑过渡的动画效果
- HTML5+CSS3+JS学习笔记-13-CSS3过渡和CSS3动画
- Bootstrap实现基于carousel.js框架的轮播图效果(无过渡动画)
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- js css3写嵌套立方体动画效果(大立方内套小立方)
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
- css3的转换效果过渡效果动画效果和列
- 使用 jquery.easing.js 增强动画过渡效果
- 制作动画平滑过渡效果:《CSS3 Transition》
- 使用 jquery.easing.js 增强动画过渡效果
- jquery使用CSS3实现文字动画效果插件Textillate.js