首页 > Web开发 > 详细

CSS3Transition添加多个过渡效果

时间:2015-06-24 20:42:58      阅读:473      评论:0      收藏:0      [点我收藏+]

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

原文:http://www.cnblogs.com/xinpureZhu/p/4598378.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!