css3-动画、过渡、变形

！important Github中上了10k的都是优秀的框架

动画
flash
js
css3 高效，在可以使用css3完成动画的时候绝对不使用js

1.动画定义 - 交给专业的人来做
运行方式【关键帧】
@keyframes move(动画名称){

from{
    left:0;
}
to{
    left:90%;
}

}

@keyframes move(动画名称){

0{
    left:0;
}
30%{
    left:90%;
}
50%{

}
100%{

}

}
2.动画调用

animation-name:动画名称;
animation-duration:3s;    动画持续时间
animation-fill-mode:forwards;    动画的填充，最后一帧的位置
    forwards
    backwards
animation-timing-function:linear;    动画的时间曲线
    linear
    ease
    ease-in
    steps
animation-delay:1s;        动画的延迟
animation-iteration-count:infinite（无休止）;    动画重复次数
animation-direction:alternate-reverse;        动画运行方向
animation-plat-state:running;            动画的运行状态

3.动画的企业级应用【animate.css】官网：https://animate.style/
在企业级开发的狮虎，动画的定义、动画的调用我们一般交给第三方，我们只是单纯的添加样式
1.安装，用link链接引入
<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css" rel="stylesheet">
2.应用
查看官网，将你喜欢的class添加到元素上
<div class = "animate_animated animate_xxx"></div>

过渡
transition-property: all; 过渡属性

transition-duration: 2s; 持续时间

transition-delay: 1s; 延迟时间

transition-timing-function: linear; 时间曲线

transition: property duration delay linear;

过渡和动画的区别

动画是需要定义关键帧[可以同时对多个属性多个时间段进行更细致控制]

过渡无需声明关键帧，过渡也可以对多个属性进行控制，但是无法对多个时间段进行细致控制;过渡需要有一个触发行为，一般为hover

变形
transform:变形函数;

rotate(xdeg)    旋转deg表示度数
rotateZ
rotateY
rotateX

scale(x,y)        缩放函数
skew()        拉伸函数
translate()        平移函数