本篇文章由: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添加多个过渡效果的更多相关文章

  1. # Transition:添加弹出过渡效果

    # Transition:添加弹出过渡效果 通过鼠标的单击.获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变CSS的属性值. W3C-transition MDN-transition ...

  2. 15个CSS3和jQuery的超棒页面过渡效果教程

    来源:GBin1.com CSS3和jQuery从根本上改变了网页设计和程序开发.通过CSS3和jQuery,设计员和开发者不需要太多的精力或编码,就可以创造出非常 美丽令人叹惊的效果,同时还可以令你 ...

  3. jQuery Mobile 1.1八大新特性介绍

    随着HTML 5时代的来临,移动开发开始进入了一个新的时代,现在只需要懂得HTML5,配合一定的开发框架,就可以开发出十分漂亮的HTML5的移动应用.在众多的 移动HTML5开发框架中,比较著名的是j ...

  4. Android 动画机制与使用技巧

    动画效果一直是人机交互中非常重要的部分,与死板.突兀的显示效果不同,动画效果的加入,让交互变得更加友好,特别是在提示.引导类的场景中,合理地使用动画能让用户获得更加愉悦的使用体验 一.Android ...

  5. 折叠Collapse插件

    实例 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. .collapse 隐藏内容. .collapse.in 显示内容. . ...

  6. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染

    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...

  7. 9款原型设计工具与Sketch的强强组合,轻松构建交互原型!

    原型设计的发展历史经历了纸上原型.静态线框设计.到现在的可交互式原型.作为设计过程中最初始的阶段,设计师们对原型设计的要求也越来越高.因此,如今的原型设计工具格局也发生了很大的变化. Sketch对于 ...

  8. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  9. Bootstrap-Plugin:折叠(Collapse)插件

    ylbtech-Bootstrap-Plugin:折叠(Collapse)插件 1.返回顶部 1. Bootstrap 折叠(Collapse)插件 折叠(Collapse)插件可以很容易地让页面区域 ...

随机推荐

  1. 【20181024T1】小C的数组【二分+dp】

    题面 [正解] 题目求最大的最小,可以二分 设\(f_i\)表示第i个数不改满足条件需要改多少个 可以从j转移,那么[j+1,i]的均匀摊开后的差值应该在范围内 容易推出方程: \(f_i=min_{ ...

  2. [Contest20170910]string

    给定一个由且仅由字符$'H','T'$构成的字符串$S$ 给定一个最初为空的字符串$T$,每次随机地在$T$的末尾添加$'H'$或者$'T'$ 问当$S$为$T$的后缀时,在末尾添加字符的期望次数 妙 ...

  3. 求数组的平均值 Exercise07_08

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:求数组的平均值 * */ public class Exercise07_ ...

  4. [转] Ext Grid (ExtJs)上的单击以及双击事件

    例1: 1.双击 var cb = new Ext.grid.RowSelectionModel({ singleSelect:true //如果值是false,表明可以选择多行:否则只能选择一行 } ...

  5. JavaScript基础入门教程(一)

    本系列教程的说明 本教程说白了可以说是我自己学习JavaScript的笔记,主要内容参考自<JavaScript权威指南>,部分内容可能来自互联网,本系列教程假设学者之前学过c或者其它的编 ...

  6. CSS -- 文字竖直居中

    元素的height 和 lineheight 设置为一样即可.

  7. Xcode no visible @interface for XXX declares

    出现如上面的错误, 是因为没有找到这个方法, 要自己写一个这样的方法 , 如果这是个类目的方法的话,  需要在Target->Linking->Other Linker Flags中添加- ...

  8. Nao 类人机器人,Aldebaran Robotics公司

    Nao 类人机器人,Aldebaran Robotics 公司,被SOFTBANK 收购,阿里巴巴.富士康参股. https://www.aldebaran.com/en   一家法国的公司. htt ...

  9. git 统计代码量 shell脚本

    #!/bin/bash # 统计代码量 # 使用方法: sh gitstat.sh "2017-11-01" "2017-11-30" "JamKon ...

  10. shader cycles静态分析

    mali Mali Offline Compiler https://developer.arm.com/products/software-development-tools/graphics-de ...