关于css:复习css3动画

46次阅读

共计 2841 个字符，预计需要花费 8 分钟才能阅读完成。

什么是动画，动画片、漫画、视频、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>

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

正文完