乐趣区

关于css:CSS动画

jiezi

动画
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【默认值】steps
transition 速写：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 top
2) 分类
    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()
退出移动版