码迷,mamicode.com
首页 > Web开发 > 详细

css3 过渡和动画

时间:2019-09-30 23:42:59      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:mes   forward   for   ase   iter   mode   改变   dad   rds   

过渡 transition

1.过渡的定义和使用

在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果,希望它以动画的形式在一定的时间内,从旧的样式转变成新的样式,而这个过程就是过渡。过渡其实就是一个简单的动画效果

transition是简写之后的属性名,它其实是4个属性合并而成的,按顺序依次是:
transition-property: 过渡属性(默认值为all)
transition-duration: 过渡持续时间(默认值为0s)
transiton-timing-function: 过渡函数(默认值为ease函数)
transition-delay: 过渡延迟时间(默认值为0s)

注意:添加的属性他的属性值必须有明确的数值,例如color,left,width之类的,如果是display这种则无效

transition我们很少拆分使用,通常都是简写
所有属性过渡

transition: all 1s;

多个属性过渡,各个属性用 逗号 隔开

transition: width 1s,height 1s;

设置延迟和过渡函数

transition: width 2s ease 1s;

2.过渡的时间函数

常用的值有:
ease - 先快后慢
linear - 匀速
ease-in - 先慢后快
steps - 将过渡时间划分成大小相等的时间时隔来运行,通俗来说就是跳着走

以下面的代码为例

transition: width 2s steps(4);

技术图片

3.transition事件

transitionend - 过渡完成之后就会触发这个事件
transitionstart - 过渡开始执行就会触发 这个事件(延迟结束之后才执行)
注意:只能用addaddEventListener添加事件,不支持属性赋值函数的形式监听

<script>
    var div = document.querySelector("div")
    var scale = true
    div.onclick = function(){
        if(scale){
            div.style.width = "400px"
        }else{
            div.style.width = "200px"
        }
        scale = !scale
    }
    
    // 这个方式监听不支持
    div.transitionend = function(){
        console.log("过渡结束了")
    }

    // 下面的写法才支持
    div.addEventListener("transitionend",function(){
        console.log("过渡结束了")
    })
    div.addEventListener("transitionstart",function(){
        console.log("过渡开始了")
    })
</script>

过渡事件触发的次数与transition-property过渡属性的个数有关。过渡属性有几个就会触发几次

transition: width 2s,height 1s;
div.addEventListener("transitionend",function(){
        console.log("过渡结束了") //触发两次
    })

如果过渡属性是复合属性,如border-width相当于是border-top-width、border-bottom-width、border-left-width和border-right-width这四个属性的集合。则过渡事件触发4次

动画

1.动画的定义

动画可以理解成多段多度的集合,通过设置关键帧来控制样式变化的过程。例如一个元素的宽度从200px过渡到600px,起点和终点已经固定了,能改变的无非就是事件函数,控制样式变化的速度。在这阶段中样式始终朝着一个方向发展,不可能超出200-800的范围。而动画可以设置若干个关键帧,来控制不同时段元素样式的走向,达到一个视觉动画的效果

2.注册动画

创建动画就是创建一个动画名称,里面设置了若干个关键帧,控制元素在不同时段的样式的变化方向
关键帧可以用百分比,也可以用from/to,from代表0%,to代表100%

@keyframes move {
    0% {
        left: 20px;
        top: 20px;
    }

    40% {
        left: 600px;
        top: 0;
    }

    80% {
        left: 600px;
        top: 400px;
    }

    100% {
        left: 300px;
        top: 200px;
    }
}

3.应用动画

语法:animation:动画名 持续时间

.item{
    animation: move 3s;
}

4.其余属性

animation-name:动画名称
animation-duration:持续时间 单位/秒
animation-delay:延迟 单位/秒
animation-timing-function: 时间曲线
animation-iteration-count:循环次数 infinite为无限次
nimation-direction:动画方向
animation-fill-mode:当动画完成时,或当动画有延迟时,要应用的规则

解析:
动画默认只会执行一次,如果想无限循环执行下去,请设置 animation-iteration-count:infinite

animation: move 3s infinite;

动画默认只会朝着一个方向执行,即使设置了多次循环,动画依然是用一个方向,如果想设置来回交替,请设置animation-direction:alternate

animation: move 3s infinite alternate;

动画结束后会回到默认的样式,例如前面的例子,动画结束的位置是300,200,但是它马上会退回到进入动画前的0,0位置,如果要进行设置,animation-fill-mode属性有几个值可以选:
none - 动画完成回到原先的样式(默认)
forwards - 停留到动画结束时的状态
backwards - 如果动画有延迟,元素会马上渲染成0%设置的样式
both:相当于(forwards + backwards)都保留

animation: move 6s 1s 2 both;

5.用js控制播放

可以用js控制animation-play-state属性来控制动画的播放与暂停
它有2个值:
running - 播放
paused - 暂停

<script>
    var run = true
    var div = document.querySelector("div")
    function running(){
        if(run){
            // 如果是播放状态就暂停
            div.style.animationPlayState = "paused"
        }else{
            div.style.animationPlayState = "running"
        }
        run = !run
    }
</script>

css3 过渡和动画

标签:mes   forward   for   ase   iter   mode   改变   dad   rds   

原文地址:https://www.cnblogs.com/OrochiZ-/p/11614440.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!