动画
1) 介绍

1. 因为以后动画的技术不太稳固，要思考浏览器的兼容性问题2. 写动画是不须要任何的js根底3. 通过@keyframes来定义动画，规定在肯定工夫内，扭转css的属性4) 语法    1. 定义动画【在style标签外部定义】        @keyframes 动画名 {            from {} // from是关键帧，动画开始的地位            to {}   // to是关键帧，动画完结的地位        }        ==>等价于        @keyframes 动画名 {            0% {}            100% {}           }        @keyframes 动画名 {            0% {}            25% {}            50% {}            75% {}            100% {}           }        应用百分数的益处，不仅仅能够打上开始地位和完结地位的关键帧，也能够在某一个须要中央设置关键帧
  1. 应用动画

animation-name 动画名称(@keyframes中定义的动画名)

animation-duration 动画继续的工夫 秒

animation-delay 动画提早的工夫 秒

也就是以后文件在浏览器首次关上后，多少秒再执行动画

animation-direction 动画的方向

normal 失常播放动画reverse 反方向alternate 交替反转【须要动画的次数】 默认1次

animation-iteration-count 动画的次数

infinite 有限次n【整数】 规定动画执行n次

animation-timing-function 动画的速度曲线

linear  线性【匀速】ease-in 先慢后快ease-out 先快后慢ease-in-out    先慢后快再慢steps(5) 逐帧动画

animation-fill-mode 动画填充

forwards    动画完结时，元素停靠在完结地位backwards  默认  动画完结时，元素停靠在开始地位

animation-play-state 动画的播放与暂停

running 播放paused 暂停能够实现光标悬浮到元素上之后，元素暂停动画的播放

animation 速写:

animation: animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode， animation-play-state

2、动画库animate.css

1) 下载    1. 通过npm【包管理机制】        > npm install --save animate.css            element-ui            axios            jQuery            boostrap    2. 通过cdn引入在线链接【应用须要联网】        bootcdn        xxxcdn        <link href=""></link>2) 在须要应用的标签上增加类名    <div class="animate__animated animate__swing"></div>

3.过渡 transition

1) 介绍    1. transition始终须要触发，个别通过:hover    2. transition不须要设置关键帧    简略的动画成果个别采纳过渡，简单的动画成果个别采纳动画2) 语法    transition-property 过渡的属性名        能够不设置属性名 none        能够设置一个属性名 width        能够设置多个属性名 width,height...        能够设置所有的属性名 all    transition-duration 过渡的工夫        秒/毫秒  1s / 1000ms    transition-delay    过渡提早的工夫        秒/毫秒  1s / 1000ms    transition-timing-function  过渡的速度曲线        ease        ease-in        ease-out        ease-in-out        linear【默认值】        stepstransition 速写：transition-property transition-duration transition-timing-function transition-delay例如： transition: all 3s steps(8) 2s;

4.变形 transform

1) 语法    div {        transform:xxx();        transform-origin:center;    }    transform 对元素进行某种类型的变形    transform-origin 元素变形的原点center--默认left top2) 分类    1. 旋转 rotate        rotate(45deg)=rotateZ()        rotateX(angle)         rotateY(angle)        rotateZ(angle)      2. 歪斜 skew        skewX(angle)        skewY(angle)    3. 缩放 scale        scale(2) x,y轴同时缩放  （核心缩放）        scale(x,y)        如果数值比1小，则放大，如果比1大，则放大    4. 挪动 translate        translate(x)  ==  translateX()        translate(x,y)        translateX(100px)        translateY()