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. [CodeWars][JS]如何判断给定的数字是否整数

    问题描述: We are asking for a function to take a positive integer value, and return a list of all positi ...

  2. Uiautomator--Uiselector元素定位

    一.UiSelector作用 按照一定的条件(例如控件的text值,资源id),定位界面上的元素.UiSelector对象的最终目的是去构造一个UiObject对象. 二.元素定位 1.根据text定 ...

  3. 基于ACE的c++线程封装

    1. 基本需求 1) 一个基类,其某个方法代表一个线程的生命运行周期.之后通过继承自这个基类来实现个性化线程类: 2) 具备类似QObject的定时器设置功能: 3) 提供在线程对象中同步和异步执行方 ...

  4. Spring学习（二）

    1. AOP的思想(如何实现),AOP在哪些地方使用? 相关术语有哪些? AOP是面向切面编程,它是一种编程思想,采取横向抽取机制,取代了传统纵向继承体系重复性代码的方式 应用场景有: 记录日志 监控 ...

  5. CrashMonkey4IOS App测试

    下载地址:https://github.com/vigossjjj/CrashMonkey4IOS 根据下载地址里面的说明安装一下,以下进行配置 1.进入CrashMonkey4IOS-master/ ...

  6. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  7. Google之Chromium浏览器源码学习——base公共通用库(一)

    Google的优秀C++开源项目繁多,其中的Chromium浏览器项目可以说是很具有代表性的,此外还包括其第三开发开源库或是自己的优秀开源库,可以根据需要抽取自己感兴趣的部分.在研究.学习该项目前的时 ...

  8. postgresql 常用数据库命令

    连接数据库, 默认的用户和数据库是postgrespsql -U user -d dbname 切换数据库,相当于MySQL的use dbname\c dbname列举数据库,相当于mysql的sho ...

  9. Python-内置函数小结

    内建函数,Python内置的函数(build in function),不需要引用其他包,一般成为BIF   abs() 计算绝对值,abs(-10),接收number,返回一个number   ma ...

  10. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...