CSS过渡效果transition和动画

一、过渡效果

可以在不适用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只能是像素

 

三、透视透视 perspective 

可以将2D平面转换为伪3D效果
透视原理：近大远小
浏览器透视： 把近大远小的所有图像透视在屏幕上
perspective 视距，表示视距到屏幕的长短
perspective给父元素添加的

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

 

四、CSS动画animation

动画是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);
            }