CSS特效动画相关知识

一、过渡transition

transition是一种交互效果，需要触发一个事件(hover或click事件等)才会改变css属性

大部分属性都支持过减效果，注意过渡时必须是从一个有效数值问另外一个有效数值进行过渡

1 transition-property:height，width等
2 transition-duration:指定过渡效果的持续时间，时间单位:s和ms 1s＝1000ms
3 transition-timing-function:过渡的时序函数，指定过渡的执行的方式,可选值:

• ease 默认值，慢速开始，先加速，再减速
• linear 匀速运动
• ease-in 加速运动
• ease-out 减速运动
• ease-in-out 先加速 后减速
• cubic-bezier（）来指定时序函数 https://cubic-bezier.com
• steps（）分步执行过渡效果

可以设置一个第二个值：
end，在时间结束时执行过渡（默认值）
start，在时间开始时执行过渡

4 transition-delay:过渡效果的延迟，等待一段时间后在执行过渡
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时

transition-property: all;
transition-duration: 100ms， 2s;
transition-duration: 2s;
transition-timing-function: cubic-bezier(.24,.95,.82,-0.88); 
transition-timing-function: steps(2, start); 
transition-delay: 2s;
transition:2s margin-left 1s cubic-bezier（.24，.95，.82，-0.88）;

二、变形transform

1 平移：transform：translateX/Y/Z（  ）

平移元素，百分比是相对于自身计算的

• translateX（）沿着x轴方向平移
• translateY（）沿着y轴方向平移
• translateZ（）沿着z轴方向平移

z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离。
距高越大，元素高人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视。

如果需要看见效果必须要设置网页的视距

/＊设置当前网页的视距为800px，人眼距离网页的距离＊／ 
html{
perspective:800px;
}
body:hover.box1{
transform: translateZ(800px);
transform: translateY(-100px);
transform: translateX(100％);
}

2 旋转transform：rotate（   ）

通过旋转可以使元素沿着x、y或z旋转指定的角度
rotateX()
rotateY()
rotateZ()

transform: rotateZ(.25turn);
transform: rotateY(180deg) translatez(400px); 
transform: translateZ(400px) rotateY(180deg); 
transform: rotateY(180deg);

3 缩放transform：scale（   ）

 transform-origin:变形的原点 默认值 center
对元素进行缩放的函数：
scaleX（）水平方向缩放
scaleY（）垂直方向缩放
scale（）双方向的缩放

transform-origin:20px 20px;
transform:scale(2);

三、关键帧动画

动画库：animate.css动画演示_dowebok

动画和过渡类似，都是可以实现一些动态的效果，
不同的是过渡需要在某个属性发生变化时才会触发
动画可以自动触发动态效果
设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤 

@keyframes test ｛
    ／＊from表示动画的开始位置 也可以使用0％＊／
    from｛
        margin-left: θ;
    ｝
    ／＊to动画的结束位置 也可以使用100％＊／
    to｛
         margin-left: 700px;
    }
}

然后再设置元素的动画属性
 

.box2{
   
    ／＊设置box2的动画 ＊／
    ／＊ 要对当前元素生效的关键帧的名字＊／
    animation-name:test;
    ／＊ 动画的执行时间 ＊／
    animation-duration: 4s;
    ／＊动画的延时 ＊／
    animation-delay: 2s; 
    animation-timing-function:ease-in-out;*/ 
    ／＊动画执行的次数,可选值：
            次数
            infinite 无限执行
     */
    animation-iteration-count: infinite;

     /＊指定动画运行的方向,可选值：
        normal 默认值 从 from 向 to运行 每次都是这样
        reverse 从 to 向 from 运行 每次都是这样
        alternate 从 from 向 to运行 重复执行动画时反向执行
        alternate-reverse 从to向 from运行 重复执行动画时反向执行
    ＊/
    animation-direction:alternate-reverse;
    /＊设置动画的执行状态,可选值：
        running 默认值 动画执行
        paused 动画暂停
    */
    animation-play-state: paused; 
    /＊动画的填充模式,可选值：
        none 默认值 动画执行完毕元素回到原来位置
        forwards 动画执行完毕元素会停止在动画结束的位置
        backwards 动画延时等待时，元素就会处于开始位置
        both 结合了forwards 和 backwards
    */
    animation-fill-mode:both;

}