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. maven 配置问题

    ① 错误 Cannot load JDBC driver class 'oracle.jdbc.driver.OracleDriver' 原因:pom.xml文件下载ojdbc14-10.2.0.3. ...

  2. Java读取word文件,字体,颜色

    在Android读取Word文件时,在网上查看时可以用tm-extractors,但好像没有提到怎么读取Word文档中字体的颜色,字体,上下标等相关的属性.但由于需要,要把doc文档中的内容(字体,下 ...

  3. grub2添加win引导(未试用)

    http://www.ruesin.com/system/centos/centos7-grub2-193.html

  4. 《转载》Java异常处理的10个最佳实践

    本文转载自 ImportNew - 挖坑的张师傅 异常处理在编写健壮的 Java 应用中扮演着非常重要的角色.异常处理并不是功能性需求,它需要优雅地处理任何错误情况,比如资源不可用.非法的输入.nul ...

  5. ubuntu 好玩多了

    从一开始的咒骂,到慢慢的喜欢,ubuntu比CentOs可玩多了.

  6. js_继承

    一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 复制代码代码如下: <SPAN style="<SPAN style="FONT- ...

  7. MySql 里的IFNULL、NULLIF和ISNULL用法

    MySql 里的IFNULL.NULLIF和ISNULL用法 mysql中isnull,ifnull,nullif的用法如下: isnull(expr) 的用法: 如expr 为null,那么isnu ...

  8. 不常用的SQL语句记录

    只知道字段名,查询哪些表有该字段:假如字段名为Index select sysobjects.name as tablename,syscolumns.name as columnname from  ...

  9. WPF 动画显示控件

    当我们要显示一个控件的时候,不仅仅要显示这个控件,还要有动画的效果. 主要用到了DoubleAnimation类. public static void ShowAnimation(object co ...

  10. centos6.5安装elasticsearch

    java下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.htmles下载地址 : ...