可以在不适用Flash和js 的情况下实现过渡效果

属性                描述

transition            简写属性，用于在一个属性中设置四个过渡属性

transition-property 规定应用过渡的css属性的名称

transition-duration 定义过渡效果话费的时间 默认是0 单位是秒 s

transition-timing-function 规定过渡效果的时间曲线， 默认是ease

    linear 均速

    ease 逐渐慢下来

    ease-in 加速

    ease-out 减速

    ease-in-out 先加速后减速

transition-delay    规定过渡效果合适开始 默认是0s 也就是立马开始

transition: 要过渡的属性 花费时间 运动曲线 何时开始；

div {

            width: 200px;

            height: 100px;

            background-color: pink;

            transition: width 0.5s ease-in 0s;

        }

        div:hover {

            width: 400px;

        }
相当于在div 的样式里面申明要过渡的条件，当鼠标经过div的时候盒子就会变成400px宽

如果有多个属性可以用逗号隔开

所有属性读变化用all: transition: all 0.5s;

定位盒子居中对齐完美写法

transform: translate(50%); transform走自身的一半

img {

    margin: 100px;

    transition: all 0.5s;

}

img:hover {

    transform: rotate(180deg);

}

tranform-origin 设置元素转换变形的原点 默认是center center

(可以通过left right top bottom center 来调整旋转中点，也看可以用像素)

img {

    margin:300px;

    transition: all 0.5s;

    transform-origin: top left;

}

img:hover {

    transform: rotate(720deg);

}

xyz 一起设置

transform: translate3d（x,y,z）x和y可以是百分比，z只能是像素

可以将2D平面转换为伪3D效果

透视原理：近大远小

浏览器透视： 把近大远小的所有图像透视在屏幕上

perspective 视距，表示视距到屏幕的长短

perspective给父元素添加的

backface--visibility 定义当元素不同向屏幕时是否可见

动画是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

语法格式： 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向

定义格式：

    @keyframes go {

            from {

                transform: translateX(0);

            }

            to {

                transform: translateX(600px);

            }

        }

应用格式：

div {

            width: 100px;

            height: 100px;

            background-color: pink;

            /*引用动画*/

            animation: go 2s ease 0s 2;  /*自定义动画名称*/

        }  

属性       描述

animation  所有动画属性的简写属性，除了 animation-play-state

animation-name 动画名称

animation-duration 动画完成一个周期需要的时间

animation-timing-funcation 速度曲线

animation-delay 规定动画何时开始

animation-iteration-count 规定动画被播放的次数

    infinite 无限循环

animation-direction 是否在下一个周期逆向播放

    reverse 反方向

    altermate 先正常运行 再反方向运行 持续交替运行

    alternate-reverse 先反方向运行 在正方向 持续交替

animation-play-state 是否正在运行或暂停 默认是running

    paused 鼠标经过暂停

    animation-play-state: paused;

animation-fill-mode 对象动画时间之外的状态

一般情况下用前两个

如果要定义多个动画用百分比来设置

@keyframes go {

            0% { /*起始位置*/

                transform: translate3d(0,0,0);

            }

            25% {

                transform: translate3d(800px,0,0);

            }

            50% {

                transform: translate3d(800px,400px,0);

            }

            75% {

                transform: translate3d(0,400px,0);

            }

            100% {

                transform: translate3d(0,0,0);

            }