css3的动画特性

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的动画特性的更多相关文章

8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
HTML5和CSS3的新特性
html5的新特性添加了用于媒介回放的 <video>,<audio> 元素添加了语义标签譬如 header.footer.nav 等等元素添加了用于绘画的 canvas ...
CSS3常用新特性
CSS3的新特性新增CSS3特性有兼容性问题,ie9+才支持移动端支持优于PC端新增选择器和盒子模型以及其他特性 CSS新增选择器属性选择器属性选择器可以根据元素特定属性来选择元素,这样就可 ...
CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持表 ...
使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

随机推荐

test1.xlsx
耿丹CS16-2班第三次作业汇总排名学号后三位姓名作业顺序作业情况第三周博客总得分博客园地址 1 232 周* 1 8.5 3 12.5 http://www.cnblogs.com/ ...
PYTHON文件操作（二）
class file(object) def close(self): # real signature unknown; restored from __doc__ 关闭文件 "" ...
Ajax跨域：jsonp还是CORS
跨域一般用jsonp,兼容性比较好.CORS是html5最新的XHR第二版本,不支持IE8,IE9,对移动端的支持非常好.但是考虑项目后期这部分会转到同域名下,而且网址不需要支持ie8,ie9,所以我 ...
HSSFWorkBooK用法
public ActionResult excelPrint() { HSSFWorkbook workbook = new HSSFWorkbook();// 创建一个Excel文件 HSSFShe ...
js 实现图片实时预览
<body> 上传图片: <input type="file" name="file" style="width: 200px; h ...
采用cocos2d－x lua 制作数字滚动效果样例
require "Cocos2d"require "Cocos2dConstants"local testscene = class("testsce ...
如何在Linux中搭建禅道8.4.1（httpd+php+mysql）
1.安装httpd 命令:yum install httpd 然后一路y即可 2.安装php 命令:yum install php 3.安装php-mysql 命令:yum install php ...
GUI基础学习
GUI:一.界面元素:1.容器:Jwindow JFrame JDidye JApplet 2.组件:标签,文本框,按钮,下拉列表,文本域,单选框,复选框二.布局:1.边界布局:B ...
BOOST_AUTO宏
在boost中,有个非常不错的宏BOOST_AUTO(),它的作用是自动给var定义类型,适合function()函数返回的值的类型. int function() { ; } main() { BO ...
MFC如何读取XML
<?xml version="1.0" encoding="utf-8"?> <Cases> <case> <No&g ...

css3的动画特性

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

随机推荐

热门专题