web前端入门到实战:css3过渡和动画-创新互联

过渡 transition

1.过渡的定义和使用

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

创新互联公司是专业的甘南网站建设公司,甘南接单;提供网站设计制作、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行甘南网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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添加事件,不支持属性赋值函数的形式监听

学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)

web前端开发学习Q-q-u-n: 731771211,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

过渡事件触发的次数与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 - 暂停

学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(从零基础开始到前端项目实战教程,学习工具,职业规划)

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章题目:web前端入门到实战:css3过渡和动画-创新互联
浏览路径:http://scyanting.com/article/dooogs.html