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. android3D动画,绕y轴旋转

    原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...

  2. Java关于IO流的介绍

    JDK提供的流继承了四大类:InputStream(字节输入流).OutputStream(字节输出流).Reader(字符输入流).Writer(字符输出流). 字符流和字节流的主要区别:     ...

  3. Mac Vim + ctags 实现多目录跳转

    set tags=tags; set autochdir :wq保存. 在源码根目录中输入ctags -R命令.后重启vim,打开src文件,就能使用Ctrl+] 或 g Ctrl+] 来实现跳转了. ...

  4. using namespace std 和 using std::cin

    相较using std::cin使用using namespace std不会使得程序的效率变低,或者稳定性降低,只是这样作会将很多的名字引入程序,使得程序员使用的名字集合变小,容易引起命名冲突. 在 ...

  5. item2快捷键

    整理使用 iTerm 2 过程中得常用快捷键,Mac 原来自带的终端工具 Terminal 不好用是出了名的,虽然最近几个版本苹果稍微做了些优化,功能上,可用性方面增强不少,无奈有个更好用的 Iter ...

  6. POJ 2352 Stars 线段树

    题目链接 题意:在一个二维平面上有n个星星,每个星星的等级为x,x为该星星左方和下方所包含的星星的数量(包含正左和正下的),输出每个等级各有多少星星,星星坐标按照y序递增给出,y值相同按照x递增给出. ...

  7. STL源码学习----lower_bound和upper_bound算法

    转自:http://www.cnblogs.com/cobbliu/archive/2012/05/21/2512249.html 先贴一下自己的二分代码: #include <cstdio&g ...

  8. iOS打包ipa给客户测试流程

    IOS项目开发的过程中经常会用到一个测试的问题,特别是外包的项目,客户拿了那么多钱,看不到产品时时的进度说不过去,而且UI和功能是否和符合用户需求这个很重要,需要客户的认同. 所以就需要时时给开发中的 ...

  9. 关于安装teamviewer11出现verification of your teamviewer version failed错误处理

    关于安装teamviewer11出现verification of your teamviewer version failed错误处理 teamviewer 在ubuntu 中安装方法是: 去tea ...

  10. Vue.js介绍样码

    了解一下,其它的什么SASS,COMPASS,WEBPACK,VUE.JS都看看,了解一下前端开发的一些知识点吧. <!DOCTYPE html PUBLIC "-//W3C//DTD ...