1、$(".aa").delay(2500).animate({width:0}); // 延迟
2、setTimeout(function(){ --> css3 animate动画库
$(".aa").addClass("animated bounce ")
},500) // 延迟
3、transition：（是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果 例子中width改为all为所有属性都能过渡）
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
————————————————————
transition和animation的区别：transition是一次动画，需要触发，动的是它本身
animation是可重复动画（多次动画），可以自己在哪动，动的只是它虚拟的，自己本身并没动
transition: 时间 延迟时间 谁动 怎么动; transition: 1s all ease; 1s = 1000ms 多个属性分开动的话，需要用 , 隔开 来分组
transition: 1s; 默认 all 和 ease
transition: property duration timing-function delay;
transition-property:all; 运动的属性 width、left、top… width 3s,top 2s
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。 时间 – 在规定时间内完成
transition-timing-function 规定速度效果的速度曲线。 动画类
transition-delay 定义过渡效果何时开始。 延迟时间
pointer-events: none;
/*阻止穿透 - 阻止鼠标在某个元素上运行*/
4、animation：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
/*设置不同的时间节点来做不同的操作 例如25%改为20%那么0%里边的动画时间会被缩短 动画会变快*/
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
animation: name duration timing-function delay iteration-count direction; /*animation的六个值*/
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。（linear ease ease-in ease-out）
animation-delay 规定在动画开始之前的延迟。（time 设置时间）
animation-iteration-count 规定动画应该播放的次数。（n infinite）
animation-direction 规定是否应该轮流反向播放动画。（normal alternate 反向播放前提：播放次数为多次）
重要：animation动画没有改编元素的实际位置；动画完成后会回到起始位置；不回起始位置办法：
animation-fill-mode : none | forwards | backwards | both;
none：不改变默认行为。
forwards ：设置对象状态为动画结束时的状态
backwards：设置对象状态为动画开始时的状态
both：设置对象状态为动画结束或开始的状态
</style>
4、transform:
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
-------------------------------------------
transform-origin: 30px 0;轴心（源(原)点）默认值 center center 支持 任意值
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate 位移
translate(x,y) 定义 2D 转换。 transform 变形|变幻 translate(x,y)，括号中 如果只有一个值，则代表x y为0
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 一个值的时候，代表x和y。如scale(1)
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 transform: rotateZ(45deg) rotateX(30deg);如果有rotateZ,必段写在其他的轴的最前面。rotate默认是Z轴
rotate3d(x,y,z,angle) 定义 3D 旋转。 //用法 rotate3d（1,1,1,90deg）
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。 景深
transform-style:flat; 不启用 【是否启用 3D】
transform-style:flat; 开启3D
5、使用3D前先给起父级不需动的元素加上
perspective:150; (设置元素被查看位置的视图：)
-webkit-perspective:150; /* Safari and Chrome */
给要动的元素加上transform-style: preserve-3d;
要旋转的正反量两面加上： backface-visibility: hidden;
6、 我想要的旋转
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:500;
-webkit-perspective:500; /* Safari and Chrome */
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-animation:mymove 1s;
}
@-webkit-keyframes mymove{
from{}
to{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
}
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>