css3 的过渡动画，有些时候会产生一些其他问题。

比如：你想先改一个css属性，之后再进行动画过渡，结果实际上你会发现，css属性和动画是同步进行的。这个应该是在编译阶段就确定好了。

所以只能通过settimeout 来进行异步处理。

<!DOCTYPE html>

<!--HTML5 doctype-->

<html>

    <head>

<style type="text/css">

.stage {

    width: 300px;

    height: 300px;

    float: left;

    margin: 15px;

    position: relative;

    background: url(http://www.w3cplus.com/sites/default/files/blogs/2013/1311/bg.jpg) repeat center center;

    -webkit-perspective: 1200px;

    -moz-perspective: 1200px;

    -ms-perspective: 1200px;

    -o-perspective: 1200px;

    perspective: 1200px;

}

.container {

    position: absolute;

    top: 50%;

    left: 50%;

    -webkit-transform-style: preserve-3d;

    -moz-transform-style: preserve-3d;

    -ms-transform-style: preserve-3d;

    -o-transform-style: preserve-3d;

    transform-style: preserve-3d;

}

.container img {

    position: absolute;

}

.container img:nth-child(1){

    z-index: 1;

    opacity: .6;

}

.s1 img:nth-child(2){

    z-index: 2;

    -webkit-transform: translate3d(30px,30px,200px);

    -moz-transform: translate3d(30px,30px,200px);

    -ms-transform: translate3d(30px,30px,200px);

    -o-transform: translate3d(30px,30px,200px);

    transform: translate3d(30px,30px,-200px);

}

.s2 img:nth-child(2){

    z-index: 2;

    -webkit-transform: translate3d(30px,30px,-200px);

    -moz-transform: translate3d(30px,30px,-200px);

    -ms-transform: translate3d(30px,30px,-200px);

    -o-transform: translate3d(30px,30px,-200px);

    transform: translate3d(30px,30px,-200px);

}

</style>

<script src="jquery.min.js"></script>

<script>

function c(){

    $("#aaaa").css("left", "-10px");

}

function a(){

    $("#aaaa")[0].style["transform"] = "translate3d(-100%,0,0) scale(1)";

    //for(var s = +new Date(); s + 200 > +new Date();){}

    $("#aaaa")[0].style["transition"] = "all 0.23s ease-out";

    // for(var s = +new Date(); s + 200 > +new Date();){}

     //for(var s = +new Date(); s + 30000 > +new Date();){}

    //$("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";

     console.log(111111)

}

function b(){

    $("#aaaa")[0].style["WebkitTransform"] = "translate3d(-0%,0%,0) scale(1)";

}

</script>

</head>

<body>

<div class="stage s1">

    <div class="container">

        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" id="aaaa" />

        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />

    </div>

</div>

<div class="stage s2">

    <div class="container">

        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />

        <img src="http://www.w3cplus.com/sites/default/files/blogs/2013/1311/cardKingClub.png" alt="" width="70" height="100" />

    </div>

</div>

</body>

</html>

$("#aaaa")[0].style["transform"] ="translate3d(-100%,0,0) scale(1)";
$("#aaaa")[0].style["transition"] = "all 0.23s ease-out";

css3的动画特性的更多相关文章

  1. 8款超酷而实用的CSS3按钮动画

    1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...

  2. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  3. HTML5和CSS3的新特性

    html5的新特性 添加了用于媒介回放的 <video>,<audio> 元素 添加了语义标签譬如 header.footer.nav 等等元素 添加了用于绘画的 canvas ...

  4. CSS3常用新特性

    CSS3的新特性 新增CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 新增选择器和盒子模型以及其他特性 CSS新增选择器 属性选择器 属性选择器可以根据元素特定属性来选择元素,这样就可 ...

  5. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  6. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  7. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  8. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  9. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

随机推荐

  1. Sql Server函数全解<三>数据类型转换函数和文本图像函数

    阅读目录 一:数据类型转换函数 二:文本和图像函数 一:数据类型转换函数 在同时处理不同数据类型的值时,SQL Server一般会自动进行隐士类型转换.对于数据类型相近的值是有效的,比如int和flo ...

  2. 多线程AutoResetEvent

    我们在线程编程的时候往往会涉及到线程的通信,通过信号的接受来进行线程是否阻塞的操作. AutoResetEvent 允许线程通过发信号互相通信.通常,此通信涉及线程需要独占访问的资源. AutoRes ...

  3. Spark基础知识汇总

    2,wordcount: val wordcount = sc.textFile()).reduceByKey(_ + _).sortByKey().collect val wordcount = s ...

  4. Python flask 基于 Flask 提供 RESTful Web 服务

    转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...

  5. Rails 5 开发进阶

    Rails 5 开发进阶:https://www.gitbook.com/book/kelby/rails-beginner-s-guide/details   cancan : http://blo ...

  6. 关于datepicker只显示年、月、日的设置

    关键时侯,还得看官方文档.花了半个多小时,找了网上一大堆答复,然后一一验证,90%没有能解决问题. 先给出官方文档的URL: http://bootstrap-datepicker.readthedo ...

  7. WPF DataGrid 性能加载大数据

    WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系 ...

  8. jdbcTemplate批量插入（添加）

    public void addSubscibe(List<PermedipUserSubscribeVo> list) { final List<PermedipUserSubscr ...

  9. CDR VBA鼠标选择

    Dim x As Double, y As Double, Shift As Long, b As Boolean, doc As Document Dim sel1 As Shape, sel2 A ...

  10. Winform Textbox控件字体垂直居中

    项目中遇到要求Textbox内的字体垂直居中的问题,在网上找一直没有理想的解决方案.后来发现可以通过设置控件的字体来达到预期的效果. 默认的Textbox的Font属性为 “宋体, 9pt”,效果如下 ...