CSS3Transition添加多个过渡效果
本篇文章由:http://xinpure.com/css3transition-to-add-multiple-transition-effects/
通过监听动画的结束事件,可以为一个元素添加多个动画效果
监听动画事件
-webkit-animation 动画有三个事件:开始事件 webkitAnimationStart;结束事件 webkitAnimationEnd;重复运动事件 webkitAnimationIteration
在之前的一遍文章当中,演示了监听结束事件的效果: CSS3使用Animation为同一个元素添加多个动画效果
同样的, -webkit-transition 也可以监听到动画事件,但是只能监听到 结束事件 webkitTransitionEnd
实例
HTML Code
<div id="ts_div"></div>
CSS Code
#ts_div {
width: 300px;
height: 300px;
margin: 100px auto 0;
background-color: #000;
transition: all 1s ease;
}
#ts_div:hover {
transform: translateX(200px);
}
JS Code
var ts_div = document.getElementById("ts_div");
$("#ts_div").bind("webkitTransitionEnd", function() {
ts_div.css("transform: translateX(-400px)")
});
效果示图
CSS3Transition添加多个过渡效果的更多相关文章
- # Transition:添加弹出过渡效果
# Transition:添加弹出过渡效果 通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. W3C-transition MDN-transition ...
- 15个CSS3和jQuery的超棒页面过渡效果教程
来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...
- jQuery Mobile 1.1八大新特性介绍
随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...
- Android 动画机制与使用技巧
动画效果一直是人机交互中非常重要的部分,与死板.突兀的显示效果不同,动画效果的加入,让交互变得更加友好,特别是在提示.引导类的场景中,合理地使用动画能让用户获得更加愉悦的使用体验 一.Android ...
- 折叠Collapse插件
实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
- 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!
原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...
- JavaScript 读取修改元素 及 伸拉门案例
JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...
- Bootstrap-Plugin:折叠(Collapse)插件
ylbtech-Bootstrap-Plugin:折叠(Collapse)插件 1.返回顶部 1. Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域 ...
随机推荐
- 【20181024T1】小C的数组【二分+dp】
题面 [正解] 题目求最大的最小,可以二分 设\(f_i\)表示第i个数不改满足条件需要改多少个 可以从j转移,那么[j+1,i]的均匀摊开后的差值应该在范围内 容易推出方程: \(f_i=min_{ ...
- [Contest20170910]string
给定一个由且仅由字符$'H','T'$构成的字符串$S$ 给定一个最初为空的字符串$T$,每次随机地在$T$的末尾添加$'H'$或者$'T'$ 问当$S$为$T$的后缀时,在末尾添加字符的期望次数 妙 ...
- 求数组的平均值 Exercise07_08
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:求数组的平均值 * */ public class Exercise07_ ...
- [转] Ext Grid (ExtJs)上的单击以及双击事件
例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...
- JavaScript基础入门教程(一)
本系列教程的说明 本教程说白了可以说是我自己学习JavaScript的笔记,主要内容参考自<JavaScript权威指南>,部分内容可能来自互联网,本系列教程假设学者之前学过c或者其它的编 ...
- CSS -- 文字竖直居中
元素的height 和 lineheight 设置为一样即可.
- Xcode no visible @interface for XXX declares
出现如上面的错误, 是因为没有找到这个方法, 要自己写一个这样的方法 , 如果这是个类目的方法的话, 需要在Target->Linking->Other Linker Flags中添加- ...
- Nao 类人机器人,Aldebaran Robotics公司
Nao 类人机器人,Aldebaran Robotics 公司,被SOFTBANK 收购,阿里巴巴.富士康参股. https://www.aldebaran.com/en 一家法国的公司. htt ...
- git 统计代码量 shell脚本
#!/bin/bash # 统计代码量 # 使用方法: sh gitstat.sh "2017-11-01" "2017-11-30" "JamKon ...
- shader cycles静态分析
mali Mali Offline Compiler https://developer.arm.com/products/software-development-tools/graphics-de ...