css3动画相关笔记

 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>