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. bzoj4349: 最小树形图

    最小树形图模板题…… 这种\(O(nm)\)的东西真的能考到么…… #include <bits/stdc++.h> #define N 60 #define INF 1000000000 ...

  2. 【Tomcat】配置Tomcat

    写这篇博文的原因:因为发布Maven项目的时候,始终无法访问.所以顺便重新配置了Tomcat. 1.首先到官网下载一个Tomcat7版本的zip包,解压后,放入C盘(根据个人需求放置). 2.修改co ...

  3. Swift 定义函数 参数 返回值

    定义多参数函数 - 用func声明函数  func name(parameters) -> return type { function body } func halfOpenRangeLen ...

  4. java文件下载和导出文件名乱码浏览器兼容性问题

    实例: String poorName= dataMap.get("NAME").toString(); String villageName = dataMap.get(&quo ...

  5. select初始化添加option,通过标签给出回显值，由于回显值和初始化值option中有一个值重复，去重等问题！

    第一张图片: 第二张图片 /** *该方法是为了去重,所谓去重就是 因为回显给select附上了值并设置为selected选中状态,而在我们初始化所有的select添加option元素中于回显的值重复 ...

  6. MVC Code First 自动生成数据库

    1.新建一个MVC项目

  7. gdb调试

    ·代码(实验楼中的代码,改了部分数值)命名为test.c int g(int x) { return x + 7; } int f(int x) { return g(x); } int main(v ...

  8. iOS - .a静态库的打包（包括打包的文件中用到了一些别人的三方库和分类的处理）

    一.概念篇 什么是库? 库是程序代码的集合,是共享程序代码的一种方式 根据源代码的公开情况,库可以分为2种类型 开源库 公开源代码,能看到具体实现 比如SDWebImage.AFNetworking ...

  9. JS中获得当前时间的年月

    //获取完整的日期 var date=new Date; var year=date.getFullYear(); var month=date.getMonth()+1; month =(month ...

  10. linux 如何查找io的进程

    [root@NB ok]# echo chenlin|base64;echo Y2hlbmxpbgo= [root@NB ok]# yum search iotop Loaded plugins: f ...