Js点击触发Css3的动画Animations、过渡Transitions效果
关键是首先指定动画效果的CSS属性名称，然后在Js中改变这个属性
如果不使用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>
原创文章，欢迎转载，转载请注明出处！
Js点击触发Css3的动画Animations、过渡Transitions效果的更多相关文章
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- 使用css动画实现领积分效果
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- js代码点击触发事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- js和jquery触发按钮点击事件
js触发按钮点击事件 function load(){ //下面两种方法效果是一样的 document.getElementById("target").onclick(); do ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- CSS3 动画及过渡详解
今天开始我们一起来学习有关于CSS3制作动画的几个属性:变形(transform).过渡(transition)和动画(animation)等CSS3技术. 首先我们先来了解一下变形(transfor ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
随机推荐
- 使用git将项目上传到github
使用git将项目上传到github(最简单方法) 首先你需要一个github账号,所有还没有的话先去注册吧! https://github.com/ 我们使用git需要先安装git工具,这里给出下 ...
- getQueryStringByName url参数/
MasterId: (masterIdUrl != null && masterIdUrl != "") ? masterIdUrl : null ClassId: ...
- 同步和异步概念（由DZW前端框架引发的百度地图api无法加载问题总结）
首先概念: 在计算机领域,同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么这个进程将会一直等待下去,直到收到返回信息才继续执行下去:异步是指进程不需要一直等下去,而是继续 ...
- Windows之系统自带截屏快捷键
Windows之系统自带截屏快捷键 现在我们都习惯了使用QQ截屏,但是有时候电脑没有网络,也就意味着无法登陆QQ,在这个时候再有截屏的需求时,我们就束手无策了. 截取全屏 现在我说以个Windows系 ...
- node学习: package.json
package.json 定义了这个项目所需要的各种模块,以及项目的配置信息(比如名称.版本.许可证等元数据) 1.创建 package.json npm init npm init –yes 2.p ...
- js根据ip自动获取地址（省市区）
HTML: <html> <head> <meta charset="utf-8"> <meta name="viewport& ...
- 解决ssh ltt3.bg.cn 'jps' bash: jps: command not found 问题
>>提君博客原创 http://www.cnblogs.com/tijun/ << linux 上我用hadoop用户配置好SSH后,运行 ssh ltt3.bg.cn ' ...
- 剑指offer(10)
题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有的奇数位于数组的前半部分,所有的偶数位于数组的后半部分,并保证奇数和奇数,偶数和偶数之间的相对位置不变. 思路: 如果忽略题目中 ...
- Spring boot+ logback环境下，日志存放路径未定义的问题
日志路径未定义 环境:Spring boot + logback 配置文件: <configuration> <springProfile name="dev"& ...
- Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1)
Spring Boot(1)——开发你的第一款Spring Boot应用(Edition1) 准备工作: java:java 8 或者 java 9: Spring框架:5.0.8.RELEASE或以 ...