复习css3动画

什么是动画，动画片、漫画、视频、flash等等会动的画面都是动画，颜色高度等属性等变化（过渡）也是动画，CSS3对于动画的实现有过渡和帧动画

上干货，目前我学到是CSS3动画属性
transition和animation
动画常常于transform属性一起实用

动画属性学习

transition 过渡

属性的使用顺序：

属性名称（property）
过渡时间（duration）
延迟时间（delay）
时间函数（timing-function）
时间函数也就是过渡效果有以下几种
- ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
- linear - 规定从开始到结束具有相同速度的过渡效果
- ease-in -规定缓慢开始的过渡效果
- ease-out - 规定缓慢结束的过渡效果
- ease-in-out - 规定开始和结束较慢的过渡效果
- cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

案例：

<style>
    .box {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: transform 2s linear, width 2s linear,height 3s 2s;
    }
    
    .box:hover {
        width: 400px;
        height: 400px; 
        transform: rotate(80deg);
    }
</style>

animation

 animation: name duration timing-function delay iteration-count direction fill-mode;

属性的使用顺序：

动画名称（name）--@keyfrsmes
过渡时间（duration）延迟时间（delay）
时间函数（timing-function）
播放次数（iteration-count）
播放方向（direction）轮流播放和反向播放
停止播放的状态（fill-mode）是否暂停（play-state）

案例：

 <style>
.box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        animation: move 4s linear 2;
    }
    
    @keyframes move {
        0% {
            background: skyblue;
            transform: translate(0px, 0px);
        }
        25% {
            background: chartreuse;
            transform: translate(200px, 0px);
        }
        50% {
            background: yellow;
            transform: translate(200px, 200px);
        }
        75% {
            background: lightcoral;
            transform: translate(0, 200px);
        }
        100% {
            background: blueviolet;
            transform: translateY(0px, 0px);
        }
    }
  </style>

动画监听
我们做动画肯定是前端去进行一个控制这会就体现出监听的重要性了
（要注意兼容性）
animationstart
animationend，transitionend
animationiteration
注意这些监听和设置动画属性也有关系，如果动画一直运行这个动画结束监听则就不好用了
举例

 <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 2s linear, width 2s linear, height 3s 2s;
        }
        
        .box:hover {
            width: 400px;
            height: 400px;
            transform: rotate(80deg);
        }
        
        .box2 {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 4s linear 2;
        }
        
        @keyframes move {
            0% {
                background: skyblue;
                transform: translate(0px, 0px);
            }
            25% {
                background: chartreuse;
                transform: translate(200px, 0px);
            }
            50% {
                background: yellow;
                transform: translate(200px, 200px);
            }
            75% {
                background: lightcoral;
                transform: translate(0, 200px);
            }
            100% {
                background: blueviolet;
                transform: translateY(0px, 0px);
            }
        }
        
        .box3 {
            margin-top: 200px;
            width: 150px;
            height: 300px;
            background: url(../wd.jpeg) no-repeat;
            animation: run 1s steps(9) 2 alternate;
        }
        
        @keyframes run {
            100% {
                background-position-x: -1500px;
            }
        }
    </style>
</head>

<body>
    <div class="box">
    </div>
    <div class="box2">
    </div>
    <div class="box3">
    </div>
</body>
<script>
    let $BOX3 = document.querySelector('.box3')
    let $box = document.querySelector('.box')

    //监听animation动画开始方法
    $BOX3.addEventListener('animationstart', () => {
            console.log('动画开始了')
        })
        //监听animation动画结束方法
    $BOX3.addEventListener('animationend', () => {
            console.log('动画结束了')
        })
        //监听animation重复运动方法
    $BOX3.addEventListener('animationiteration', () => {
        console.log('动画次数')
    })

    // 监听transition动画结束方法
    // 兼容性写法
    // $BOX3.addEventListener("webkitTransitionEnd",()=>{});
    // $BOX3.addEventListener("mozTransitionEnd", ()=>{});
    // $BOX3.addEventListener("MSTransitionEnd", ()=>{});
    // $BOX3.addEventListener("otransitionend", ()=>{});
    $box.addEventListener("transitionend", () => {
        console.log('过渡结束了')
    });
</script>

后续做几个小动画
到此告一段落，欢迎指导

复习css3动画

动画属性学习

transition 过渡

animation

一叶知秋

引用和评论

自己写一个自定义的alert（弹窗）记录一下

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号