Css3营造变形与动画效果,transitionend基本用法

By admin in 4858美高梅 on 2019年3月25日

transition从功效上看是一种平滑对接的动画片,本质上是在线性时间内将质量从上马值过渡到截止值。例如获得宗旨,点击鼠标等动作导致CSS属性值的变更是须臾间实现的,感觉有些生硬。用transition能够钦命在某时间段内将属性值平滑过渡,增强用户体验。

上一篇介绍了CSS3里transform变形属性,本篇介绍另1个人气动画属性transition。transition从成效上看是一种平滑对接的动画片,本质上是在线性时间内将质量从发轫值过渡到完工值。例如获得核心,点击鼠标等动作导致CSS属性值的转移是一下子到位的,感觉微微生硬。用transition能够钦定在某时间段内将属性值平滑过渡,增强用户体验。

transitionend事件是什么样


  • 概念:

transitionend事件在CSS
transition完结的时候接触。如果transition在成功前被剔除(例如remove掉transition属性),则不会接触。如在transition完成前设置
display: none,或CSS未作变更,事件相同不会被触发.

  • 骨干栗子

/*

* 在指定的元素上监听transitionend事件, 例如#demo

* 然后指定一个函数, 例如 showMessage()

*/

function showMessage() {

console.log('Transition 已完成');

}

var element = document.getElementById("demo");

element.addEventListener("transitionend", showMessage, false);//true捕获执行,false冒泡执行
  • demo演示

示范链接

下边通过生动的法门给大家来得下css3创建变形与动画片效果

  • 伍个子属性
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • 接触过渡的方式
  • transitionend事件
  • 隐式过渡
  • 开关过渡和永久过渡
  • auto过渡
  • 四个子属性
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • 接触过渡的法门
  • transitionend事件
  • 隐式过渡
  • 开关过渡和永恒过渡
  • auto过渡
transitions :
  • transition-property

点名供给连接的CSS属性。并不是兼备属性都能联网的,只有能数字量化的CSS属性才能接通

数字量化的CSS属性:width,height,top,right,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index

all,表示拥有属性都将得到过渡效果。

  • transition-duration

接通供给的年月,单位可钦定s秒,也可钦命ms阿秒。暗许值是0,表示即刻转变。假使设置了多少个连片性质,但各种属性的联网时间都一模一样,你没须要为transition-duration设多个值,唯有设三个即可,该值会利用到具有连接性质上

  • transition-delay

推迟起初接入的岁月,暗中认可值是0,表示不延迟,马上开端接入动作。单位是s秒或ms微秒。w3cschool上没说的是,该属性还能够设负时间,意思是让过渡动作从该时间点开端起步,从前的连接动作不出示。

  • transition-timing-function

连着函数,有linear,ease,ease-in,ease-out,ease-in-out,cubic-bezier(n,n,n,n),steps骨子里它们都以贝赛尔曲线。

linear是匀速过渡,ease是先快再慢的节拍,ease-in是加速冲刺的节奏,ease-out是放慢到甘休的音频,ease-in-out是先加快后减速的节拍。

css3制作动画的多少个属性:变形(transform),过渡(transition)和动画片(animation)。

5个子属性

transition有6个子属性:transition-property,transition-duration,transition-timing-function,transition-delay

transition-property点名须要连接的CSS属性。并不是兼备属性都能联网的,只有能数字量化的CSS属性才能接通。

哪些属于能数字量化的CSS属性呢?例如:

颜色系,如color,background-color,border-color,outline-color

数字系,实在太多了,如width,height,top,right,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index等。

01系,如visibility(0象征隐藏,1代表展现)

再有越多如渐变,阴影等分类请参见W3C的Animation of property
types,不一一列举了。

W3C上还有可连接性质一览表Properties from
CSS。日常假诺能设数字(包含%百分比)的属性都能对接。

Css3营造变形与动画效果,transitionend基本用法。除了那么些之外单个钦赐属性外,transition-property还是能够设为all,表示拥有属性都将获取过渡效果。

transition-duration紧接必要的岁月,单位可钦点s秒,也可钦赐ms飞秒。暗中认可值是0,表示立刻转变。

即使设置了五个对接性质,但每一个属性的联网时间都一模一样,你没须要为transition-duration设四个值,只有设二个即可,该值会选拔到具备连接性质上。

transition-timing-function连片函数,有lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)steps

实则它们都以贝赛尔曲线。如下

4858美高梅 1

 

看贝赛尔曲线就明白了,linear是匀速过渡,ease是先快再慢的点子,ease-in是加快冲刺的旋律,ease-out是放慢到停止的韵律,ease-in-out是先加快后减速的点子。

 

于今卡通的精度越来越高,假如约定义好的这么些函数满意不断你的需要,可以透过cubic-bezier(n,n,n,n)自定义平滑曲线。

从地点的图纸中观测到,贝塞尔曲线有5个点,左下为伊始点P0坐标固定为(0,0),右上为终点P3坐标固定为(1,1),中间有两点P1和P2的坐标便是cubic-bezier(n,n,n,n)的参数。

经过4条连起来的直线,生成平滑的曲线。一图胜千言:

 

4858美高梅 2

 

 

4858美高梅 3

 

 

4858美高梅 4

 

 

4858美高梅 5

 

假如要凭脑子空写出贝赛尔函数的代码,大概比较辛勤。幸而毫不你本人去计算,能够到工具网站(如贝赛尔立方)上自动生成想要效益的代码。

您也足以在该站点上,体验一把lineareaseease-in4858美高梅 ,,ease-outease-in-out间的异样。

 

steps能够把过渡阶段分割成等价的几步。什么意思啊?一图胜千言:

4858美高梅 6

 

steps函数有四个参数,首个参数是分开的数量,第3个参数可选,是第3字startend,不设的话暗中认可是end

因此steps(4, start)等价于step-start(4)steps(4, end)等价于step-end(4)。例如steps(4, end)永不像贝塞尔曲线那样平滑过渡,

也正是将联网进程全部分成4步,在每一步瞬间完毕联网。最下边的事例中早已持有呈现,很简单明白

 

transition-delay延迟起头接入的小运,默许值是0,表示不延迟,立刻开首接入动作。单位是s秒或ms阿秒。

w3cschool上没说的是,该属性还是可以设负时间,意思是让过渡动作从该时间点起来运行,在此之前的连通动作不展现。

你能够独自钦命那多少个子属性,也能够像background等属性一样,合并在transition属性里内定。

但合并时要小心,因为有transition-duration和transition-delay都是时间,浏览器会依据先后顺序,将首先个时刻认作为transition-duration,第一个日子认作为transition-delay。

是分离也许统一钦赐并无标准答案。分开钦赐可能代码易读性高级中学一年级点。

但当页面须要适应各浏览器时,每种都要加上-ms-,-moz-等前缀,代码会变的很多,合并在一起代码稍微少点。

其余也得以而且钦赐多少个连片效果,例如transition: background 1s linear 2s, border-radius 2s ease-in 3s;

先实际感受一下,你可以点击这里

transitionend的应用

  • 浏览器包容

4858美高梅 7

20170907.jpg

注意: Internet Explorer 8 及更早 IE 版本不支持 add伊芙ntListener()
方法。 ,Opera 7.0 及 Opera 更早版本也不协理。
可是,对于这一个不帮忙该函数的浏览器,你能够应用 attach伊夫nt()
方法来添加事件句柄 .

  • 栗子

/* 不同浏览器兼容 */

function whichTransitionEvent(){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {

        'transition':'transitionend',

        'OTransition':'oTransitionEnd',

         'MozTransition':'transitionend',

        'WebkitTransition':'webkitTransitionEnd',

        'MsTransition':'msTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
}

上边介绍:过渡transition。

接触过渡的情势

广大的就是伪类触发:hover,:focus,:active,:checked等。还有诸如@media媒体询问,依据设备大小,横屏竖屏切换时接触。

再有如click,keydown等JS事件触发。页面加载也能接触就不一一列举了。总而言之过渡的本色是在时刻段内平滑对接属性值,与怎么触发没有提到。

四个子属性

transition有伍个子属性:transition-property,transition-duration,transition-timing-function,transition-delay

transition-property钦点需求衔接的CSS属性。并不是具有属性都能联接的,唯有能数字量化的CSS属性才能联网。哪些属于能数字量化的CSS属性呢?例如:

颜色系,如color,background-color,border-color,outline-color

数字系,实在太多了,如width,height,top,right,bottom,left,zoom,opacity,line-height,background-position,word-spacing,font-weight,vertical-align,outline-outset,z-index等。

01系,如visibility(0代表隐藏,1代表展现)

再有越多如渐变,阴影等分门别类请参考W3C的Animation of property
types,不一一列举了。W3C上还有可连接性质一览表Properties
from
CSS。日常假如能设数字(包含%比例)的属性都能联接。

除了单个内定属性外,transition-property还是能够设为all,表示拥有属性都将获得过渡效果。

transition-duration对接供给的小时,单位可钦赐s秒,也可内定ms阿秒。暗中同意值是0,表示立时转变。要是设置了八个连片性质,但各类属性的连接时间都同样,你没须要为transition-duration设七个值,唯有设3个即可,该值会选用到持有连接性质上。

transition-timing-function对接函数,有lineareaseease-inease-outease-in-outcubic-bezier(n,n,n,n)steps。其实它们都是贝赛尔曲线。如下

4858美高梅 8

看贝赛尔曲线就知晓了,linear是匀速过渡,ease是先快再慢的旋律,ease-in是加速冲刺的韵律,ease-out是放慢到截止的节拍,ease-in-out是先加快后减速的旋律。

前几日动画的精度越来越高,就算约定义好的这个函数知足不断你的须求,能够经过cubic-bezier(n,n,n,n)自定义平滑曲线。从地点的图样中观测到,贝塞尔曲线有五个点,左下为早先点P0坐标固定为(0,0),右上为巅峰P3坐标固定为(1,1),中间有两点P1和P2的坐标就是cubic-bezier(n,n,n,n)的参数。通过4条连起来的直线,生成平滑的曲线。一图胜千言:

4858美高梅 9

4858美高梅 10

4858美高梅 11

4858美高梅 12

假设要凭脑子空写出贝赛尔函数的代码,或者相比艰辛。幸亏毫无您本人去总括,能够到工具网站(如贝赛尔立方)上自动生成想要效益的代码。你也足以在该站点上,体验一把lineareaseease-inease-outease-in-out间的异样。

steps能够把过渡阶段分割成等价的几步。什么意思吧?一图胜千言:

4858美高梅 13

steps函数有三个参数,第一个参数是分开的数目,第一个参数可选,是重点字startend,不设的话暗中认可是end。因此steps(4, start)等价于step-start(4)steps(4, end)等价于step-end(4)。例如steps(4, end)永不像贝塞尔曲线那样平滑对接,也等于将连通进程整整分成4步,在每一步刹那间完成交接。最下边包车型客车例子中早已持有体现,很简单精晓

transition-delay延期始发接入的时光,暗中同意值是0,表示不推迟,立时开头接入动作。单位是s秒或ms飞秒。w3cschool上没说的是,该属性还是能设负时间,意思是让过渡动作从该时间点起来运营,以前的对接动作不显得。不信你能够试试。负延迟时间在animation动画里真的有用,但恕小编才疏学浅,在transition里其实不通晓有何卵用。

你能够独自钦赐那个子属性,也得以像background等属性一样,合并在transition属性里钦命。但合并时要专注,因为有transition-duration和transition-delay都以岁月,浏览器会依照先后顺序,将首先个时间认作为transition-duration,第贰个时间认作为transition-delay。

是分离或许统一钦命并无标准答案。分开钦命或然代码易读性高一些。但当页面必要适应各浏览器时,每个都要添加-ms-,-moz-等前缀,代码会变的很多,合并在一块儿代码稍微少点。别的也足以而且钦命多个连片效果,例如transition: background 1s linear 2s, border-radius 2s ease-in 3s;

缘何采纳transitionend

  • 优势:

选拔JS控制CSS或动画,平时会利用setTimeout措施,有两点困难:

①内需在三个地点规定动画时间,CSS和JS。
②并不要命准儿,回调或然会滞后。CSS和JS以相同的快慢执行,那只是上好的场馆。

  • 劣势:

①假若操作多属性CSS,假如padding,transitionend会在padding-top,padding-right,padding-bottom,padding-left过渡甘休时均触发transitionend事件,transitionend事件将推行
4 次!
②假诺实成分也有transition的话,transitionend事件会冒泡。必要阻止冒泡。
③要是是重新的实践transition,供给解绑

//关于重复调用transition

var handleTransitionEndEvent=function(elem,fn,duration){

var called=false;

//在每次transitionEnd的事件后执行该函数

var callback = function(){

if (!called){

fn();

called=true;

}

};

elem.addEventListener(transitionEnd,function(){

callback();

//通过setTimeout来补救windowphone中不触发事件的问题

setTimeout(callback,duration);

},false);

};

注意1:上述第2条‘多属性’与‘重复的执行‘transition属性差异,“多属性”指一条属性附带多个属性,如border、margin、padding等,‘重复的实行’指transition性能有多条属性必要过度,如操作二个div同一时间过度‘color、width、height、background’时。
注意2 :hover将触发三回transition,也将触发五回transitionend.

一、例子

transitionend事件

transition既然涉及时间,自然就有事件。参照MDN有transitionend事件,顾名思义正是连着停止时触发该事件。但该事件相比坑。例如对接padding时,代码如下:

#tempDiv {
    padding: 1px;
    transition-property: padding;
    transition-duration: 1s;
}
#tempDiv:hover {
    padding: 5px;
}
function showMessage() {
    console.log('finished');    //过渡结束时触发打印log
}
var element = document.getElementById("tempDiv");
element.addEventListener("transitionend", showMessage, false);

您能够代码贴到浏览器里尝试,结果出现4条log。

因为过渡性质钦赐的是padding,所以在padding-top,padding-right,padding-bottom,padding-left过渡甘休时均触发了transitionend事件。因此log被打字与印刷了四次。

假若上述CSS少校transition-property: padding;改为all,同样会触发7回。

唯有您改成transition-property: padding-top;这么才能只触发3遍,但具体中只过渡一边的处境极度少,平日都以4边同时对接,

故此例如padding,margin,border之类的天性,用transitionend事件会有频仍捕捉的场合发生。

接触过渡的措施

常见的便是伪类触发:hover,:focus,:active,:checked等。还有诸如@media媒体询问,依照设备大小,横屏竖屏切换时接触。还有如click,keydown等JS事件触发。页面加载也能接触就不一一列举了。同理可得过渡的本来面目是在时刻段内平滑过渡属性值,与怎么触发没有涉及。

关于animationend

  • animationstart 事件在CSS动画起先播报时接触

  • animationend事件在CSS动画播放完结时接触

    animationend只会在动画实现后进行3遍;

  • animationiteration 事件在 CSS 动画重新播放时接触

先通过二个例证感性认识一下transition的动画效果。

隐式过渡

transition过渡时有时会产出一些相比含糊的气象,比如设成em的属性,如你所知em是依照font-size来计算的。

接近还有rem,vh,vw等都是根据另贰个天性的值来计量获得它的值。

举个例证padding:2em;,假如font-size被改成了,此时padding的“书面值”不变,还是是2em,但“实际值”将会产生变化并触发transition过渡。那被称作“隐式过渡”。

大部浏览器会达成隐式过渡,但听新闻说IE相当特殊,具体有多尤其作者也没试过。没试过就轻信听说好像很不审慎,但听大人讲IE过往的祝词,作者宁可信赖其有…前端工程师都懂的。

transitionend事件

transition既然涉及时间,自然就有事件。参照MDN有transitionend事件,顾名思义正是联网停止时触发该事件。但该事件相比较坑。例如对接padding时,代码如下:

#tempDiv {
    padding: 1px;
    transition-property: padding;
    transition-duration: 1s;
}
#tempDiv:hover {
    padding: 5px;
}
function showMessage() {
    console.log('finished');    //过渡结束时触发打印log
}
var element = document.getElementById("tempDiv");
element.addEventListener("transitionend", showMessage, false);

你能够代码贴到浏览器里尝试,结果出现4条log。因为过渡性质钦定的是padding,所以在padding-top,padding-right,padding-bottom,padding-left过渡甘休时均触发了transitionend事件。因而log被打字与印刷了4遍。

一旦上述CSS大校transition-property: padding;改为all,同样会触发6遍。除非你改成transition-property: padding-top;如此这般才能只触发一遍,但现实中只过渡一边的气象分外少,常常都是4边同时对接,由此例如padding,margin,border之类的质量,用transitionend事件会有频繁捕捉的情事时有发生。

鼠标放上去,div宽度从100px增大到200px。

开关过渡和永恒过渡

开关过渡,顾名思义正是触发源的风浪停止后会恢复生机到原有状态。永久过渡正是连接后不回复到原始状态。

地点的事例都以开关过渡,当鼠标hover事件结束后,图片复苏原始尺寸。但永远过渡的话,鼠标hover事件停止后,图片依然维持放大后的尺寸。

//开关过渡
.transition { 
    transition: all 1s ease-in-out;
}
.transition:hover {
    transform: scale(1.5);
}
//永久过渡
.forever { 
    transition: all 1s ease-in-out 999999s;
}
.forever:hover { 
    transform: scale(1.5);
    transition: all 1s ease-in-out;
}

因为回到原始尺寸的transition-duration被设成了二个相当大的光阴,999999s大抵有12天,理论上您页面开12天就能观望关闭过渡的功用,但实际等于永久过渡。该技能无需任何JS脚本。

隐式过渡

transition过渡时有时相会世有的相比含糊的状态,比如设成em的习性,如你所知em是根据font-size来计算的。类似还有rem,vh,vw等都是依据另壹本性质的值来测算获得它的值。举个例子padding:2em;,如若font-size被改变了,此时padding的“书面值”不变,依旧是2em,但“实际值”将会发生变化并触发transition过渡。那被称作“隐式过渡”。多数浏览器会落成隐式过渡,但据说IE很尤其,具体有多尤其笔者也没试过。没试过就轻信传说好像很非常的大心,但依据IE过往的贺词,小编宁愿信其有…前端工程师都懂的。

<style type="text/css"> 
div{  
width: 100px; 
height: 100px;  
background-color: red; 
} 
div:hover{ 
width: 200px; 
}</style><div></div>

auto过渡

万般大家属性过渡时,都是定值到定值的过渡,例如width:100px连片到200px。但要过渡到width:auto就可怜了。

固然你钦点transition: width 1s linear;会意识一直不会有1秒的平整的对接效果,而是弹指间做到过渡。

.div1 {
    background-color: red;
    width: 100px;
    height: 50px;
}
#box1:hover {
    width: auto;
    transition: width 1s linear;
}
<div id="box1" class="div1"></div>

要是想要过渡效果,必须将auto转换为固定值。那么难题来了,如何更换呢?

亟需靠JS,通过getComputedStyle获取auto后的固定值后,通过style设置该值,然后再触发CSS的连通效果。

window.onload = function(){
    var box = document.getElementById("box2"),
        originWidth = box.clientWidth,
        width2AutoLater = null,
        width2OriginLater = null;

    var width2Auto = function(element, time) {
        if (typeof window.getComputedStyle == "undefined") return;

        var width = window.getComputedStyle(element).width;
        element.style.width = "auto";
        var targetWidth = window.getComputedStyle(element).width;
        element.style.width = width;
        setTimeout(function() {
            element.style.transition = "width "+ time +"ms linear";
            element.style.width = targetWidth;
        }, 10);
    };

    var width2Origin = function(element, time) {
        setTimeout(function() {
            element.style.transition = "width 0s linear";
            element.style.width = originWidth + "px";
        }, 10);
    };

    function callLater(func, paramA, paramB){  
       return function(){  
            func.call(this, paramA, paramB);  
        };  
    }  

    width2AutoLater = callLater(width2Auto, box, 1000);
    width2OriginLater = callLater(width2Origin, box, 1000);

    box.addEventListener("mouseenter", width2AutoLater);
    box.addEventListener("mouseleave", width2OriginLater);
}
<div id="box2" class="div1"></div>

代码耐心看看应该能看精通。无CSS,全靠JS完成对接效果。

思路:给div注册了mouseenter和mouseleave事件来效仿hover效果。

mouseenter绑定width2Auto函数,函数里一时半刻将div的width设为auto后,用getComputedStyle得到大幅值,将该增长幅度值和transition设进该div的style里。

mouseleave绑定width2Origin函数,函数里将div的width改回初叶值。

因为登记事件的函数add伊夫ntListener的第二个参数是回调函数名,无法给回调函数字传送参数。

据此,使用闭包的性子,定义了callLater中间函数,函数里透过call调用上述五个函数。

开关过渡和世代过渡

开关过渡,顾名思义正是触发源的事件结束后会复苏到原有状态。永久过渡正是连接后不东山再起到原始状态。下边包车型客车事例都以开关过渡,当鼠标hover事件结束后,图片苏醒原始尺寸。但千古过渡的话,鼠标hover事件结束后,图片还是维持放大后的尺码。一图胜千言,你能够点击这里

//开关过渡
.transition { 
    transition: all 1s ease-in-out;
}
.transition:hover {
    transform: scale(1.5);
}
//永久过渡
.forever { 
    transition: all 1s ease-in-out 999999s;
}
.forever:hover { 
    transform: scale(1.5);
    transition: all 1s ease-in-out;
}

因为回到原始尺寸的transition-duration被设成了叁个相当大的时光,999999s大多有12天,理论上您页面开12天就能看出关闭过渡的效率,但具体等于永久过渡。该技能无需任何JS脚本。

那意义实在也总算动画,然则极度变化极快,不平整。

 

auto过渡

一般性我们属性过渡时,都以定值到定值的过渡,例如width:100px连着到200px。但要过渡到width:auto就可怜了。尽管你钦命transition: width 1s linear;会意识根本不会有1秒的坦荡的连通效果,而是眨眼间间做到交接,你能够点击这里

.div1 {
    background-color: red;
    width: 100px;
    height: 50px;
}
#box1:hover {
    width: auto;
    transition: width 1s linear;
}
<div id="box1" class="div1"></div>

设若想要过渡效果,必须将auto转换为固定值。那么难点来了,怎么样转移呢?供给靠JS,通过getComputedStyle获取auto后的固定值后,通过style设置该值,然后再触发CSS的交接效果。你可以点击这里

window.onload = function(){
    var box = document.getElementById("box2"),
        originWidth = box.clientWidth,
        width2AutoLater = null,
        width2OriginLater = null;

    var width2Auto = function(element, time) {
        if (typeof window.getComputedStyle == "undefined") return;

        var width = window.getComputedStyle(element).width;
        element.style.width = "auto";
        var targetWidth = window.getComputedStyle(element).width;
        element.style.width = width;
        setTimeout(function() {
            element.style.transition = "width "+ time +"ms linear";
            element.style.width = targetWidth;
        }, 10);
    };

    var width2Origin = function(element, time) {
        setTimeout(function() {
            element.style.transition = "width 0s linear";
            element.style.width = originWidth + "px";
        }, 10);
    };

    function callLater(func, paramA, paramB){  
       return function(){  
            func.call(this, paramA, paramB);  
        };  
    }  

    width2AutoLater = callLater(width2Auto, box, 1000);
    width2OriginLater = callLater(width2Origin, box, 1000);

    box.addEventListener("mouseenter", width2AutoLater);
    box.addEventListener("mouseleave", width2OriginLater);
}
<div id="box2" class="div1"></div>

代码耐心看看应该能看领会。无CSS,全靠JS达成连接效果。

思路:给div注册了mouseenter和mouseleave事件来模拟hover效果。

mouseenter绑定width2Auto函数,函数里一时将div的width设为auto后,用getComputedStyle获得小幅值,将该增加率值和transition设进该div的style里。

mouseleave绑定width2Origin函数,函数里将div的width改回开头值。

因为注册事件的函数add伊芙ntListener的第二个参数是回调函数名,不能够给回调函数字传送参数。由此采用闭包的特征,定义了callLater中间函数,函数里经过call调用上述五个函数。

若果想让鼠标放上去后div宽度在5s内平滑对接到200px。只供给加一行代码;

总结

自个儿所知的transition差不离就这么些,现在各浏览器对该属性的支撑力度应该是够的,除非你还要照顾各样旧版本的浏览器,那可能细节方法还索要多加小心。可参照腾讯的那篇文章。

复制代码 代码如下:

div:hover{  
width: 200px;  
transition:width 5s ease-in;}

那成效其实也算是动画,不过那2个变化十分的快,不平易。

假若想让鼠标放上去后div宽度在5s内平滑过渡到200px。只必要加一行代码;

复制代码 代码如下:

div:hover{  
width: 200px; 
transition:width 5s ease-in;}

此地运用的正是transition属性,它正是用来落实属性值平滑过渡,视觉上发生动画效果。

地点用的transition是缩写,包括多少个属性:transition-property,transition-duration,transition-timing-function,transition-delay,上边会相继介绍。

二、transition

css3新增transition属性,可以在事变触发成分的体裁变化时,让职能特别细腻平滑。

transition用来叙述怎么样让css属性值在一段时间内平滑的从三个值过渡到另八个值。那种连接效果能够在鼠标点击获得大旨被点击对成分任何变动中触发。

语法:

transition :
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||
<'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'>]]*

transition有七个属性值:

transition-property:执行过渡的习性。

transition-duration:钦定完结交接需求的岁月。

transition-timing-function,在一连时间段,过渡变换的速率变化,简单理解正是点名过渡函数。

transition-delay:过渡延迟时间。

1、transition-property

transition-property用来钦赐哪个属性使用过渡动画效果。

语法:

复制代码 代码如下:

transition-property : none | all | [ <IDENT> ] [ ‘,’
<IDENT> ]*

none:全体属性都不选用接入效果。

all:暗中同意值。当班值日为all时,成分爆发任何属性值变化时都将实施transition效果。

ident:成分属性名。通过ident钦赐具体怎么着属性。若是钦赐的三个属性中有有个别属性无法使用接入效果,别的属性依旧立见作用的。

连通性质唯有全部二个中式点心值的性质(供给发出动画的属性)才能有所过渡效果。在w3c中列出了独具能够兑现transition效果的css属性值以及值的品种

Property Name  
Typebackground-color 
as colorbackground-position 
as repeatable list of simple list of length, percentage, or calcborder-bottom-color 
as colorborder-bottom-width 
as lengthborder-left-color 
as colorborder-left-width 
as lengthborder-right-color 
as colorborder-right-width 
as lengthborder-spacing 
as simple list of lengthborder-top-color 
as colorborder-top-width 
as lengthbottom 
as length, percentage, or calcclip 
as rectanglecolor 
as colorfont-size 
as lengthfont-weight 
as font weightheight  
as length, percentage, or calcleft 
as length, percentage, or calcletter-spacing 
as lengthline-height  
as either number or lengthmargin-bottom 
as lengthmargin-left 
as lengthmargin-right 
as lengthmargin-top  
as lengthmax-height  
as length, percentage, or calcmax-width 
as length, percentage, or calcmin-height 
as length, percentage, or calcmin-width 
as length, percentage, or calcopacity 
as numberoutline-color 
as coloroutline-width 
as lengthpadding-bottom 
as lengthpadding-left 
as lengthpadding-right 
as lengthpadding-top 
as lengthright  
as length, percentage, or calctext-indent 
as length, percentage, or calctext-shadow 
as shadow listtop  
as length, percentage, or calcvertical-align  
as lengthvisibility  
as visibilitywidth 
as length, percentage, or calcword-spacing 
as lengthz-index 
as integer

Note:并不是怎么性质改变都会触发transiton动画效果,比如页面包车型大巴自适应宽度,当浏览器改变宽度时,并不会触发transition的法力。但上述表格所示的性格类型变更都会接触四个transition动作效果。

举例来说:能够同时给多少个性格设置动画效果,比如给height和line-height同时设置动画效果,达成div变高文字照旧垂直居中。

<!DOCTYPE html><html><head> 
<meta charset="utf-8"> 
<title>变形与动画</title> 
<style type="text/css">div { 
width: 300px; 
height: 200px; 
line-height: 200px; 
text-align: center; 
background-color: orange; 
margin: 20px auto; 
-webkit-transition-property: height line-height; 
transition-property: height line-height; 
-webkit-transition-duration: 1s; 
transition-duration: 1s; 
-webkit-transition-timing-function: ease-out; 
transition-timing-function: ease-out; 
-webkit-transition-delay: .2s; 
transition-delay: .2s;}div:hover { 
height: 100px; 
line-height: 100px;}</style></head><body> 
<div>文字垂直居中</div></body></html>

4858美高梅 14

2、transition-duration

transition-duration用来安装从旧属性过渡到新属性须求的日子,即持续时间。

3、transition-timing-function

语法:

复制代码 代码如下:

<single-transition-timing-function> = ease | linear | ease-in |
ease-out | ease-in-out | step-start | step-end |
steps(<integer>[, [ start | end ] ]?) |
cubic-bezier(<number>, <number>, <number>,
<number>)

transition-timing-function属性指的是过渡的“缓动函数”。通过这么些函数会建立一条加快度曲线,由此在全体transition变化进程中,变化速度能够不停变更。重要不外乎以下三种函数。

ease:默许值,成分样式从起头状态过渡到终止情状速度由快到慢,渐渐变慢。linear:意思是线性过渡,即过渡进度恒速。ease-in:速度越来越快,显示加快状态,平时号称“渐显著效果率”。ease-out:速度越来越慢,展现减速状态,平日号称“渐隐效果”。ease-in-out速度先加快后减速,称为“渐显渐隐效果”。

比方:鼠标经过问号,支持消息渐显渐隐。

<!doctype html><html><head> 
<meta charset="utf-8"> 
<title>transition-demo by starof</title> 
<style>#help{ 
width:20px; 
height:20px; 
border-radius:10px; 
color:#fff; 
background:#000; 
text-align:center; 
position:relative; 
margin:50px 20px; 
cursor:pointer;}#help .tips{ 
position:absolute; 
width:300px; 
height:100px; 
background:#000; 
top:-30px; 
left:35px; 
border-radius:10px; 
opacity:0; 
/*渐隐效果*/ 
transition: opacity .8s ease-in-out; 
-moz-transition: opacity .8s ease-in-out; 
-webkit-transition: opacity .8s ease-in-out;}.tips:before{ 
content:""; 
border-width:10px; 
border-style:solid; 
 border-color:transparent #000 transparent transparent; 
 position:absolute; 
 left:-20px; 
 top:30px;}#help:hover .tips{ 
 opacity:0.5; 
 /*渐显效果*/ 
 transition: opacity .8s ease-in-out; 
 -moz-transition: opacity .8s ease-in-out; 
 -webkit-transition: opacity .8s ease-in-out;}</style></head><body> 
 <div id="help">  
 ?  
 <div >帮助信息</div> 
</div></body></html>

4858美高梅 15

4、transition-delay

transition-delay设置改变属性值后多久开头实施动画。

⑤ 、属性简写

在改变四个css属性的transition效果时,把多少个transition评释用逗号隔离,然后每种属性就都有各自的连接时间和功力。

Note:第三个时刻是时间长度,第3个是延时。

复制代码 代码如下:

a{
transition: background 0.8s ease-in 0.3,
color 0.6s ease-out 0.3;}

 叁 、贝塞尔曲线和transition

transition的数学模型便是贝塞尔曲线,上面介绍。

曲线其实就是两点时期插值的功力,贝塞尔曲线是一种插值算法,比线性插值复杂一点。

贝塞尔曲线:起初点,终止点(也称锚点),控制点。通过调整控制点,贝塞尔曲线的形状发生变化。

k阶贝塞尔插值算法要求k+3个控制点。

一阶贝塞尔曲线(线段):意思正是从P0到P1的接连点,用来描述一段线段。贰遍贝塞尔插值就是线性插值。

4858美高梅 16

4858美高梅 17 

二阶贝塞尔曲线(抛物线):P0-P1是曲线在P0处的切线。

4858美高梅 18

4858美高梅 19

三阶贝塞尔曲线:

4858美高梅 20

4858美高梅 21

transition用到的正是三阶贝塞尔插值算法,如下图。

时刻在0,1间隔,待变换属性也觉得是0,1间距。P0和P3的坐标一向是(0,0)和(1,1)。transition-timing-function属性用来规定P1和P2的坐标。

4858美高梅 22

 

ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]
linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]
ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]
ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]
ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]
step-start steps(1,start)
step-end steps(1,end)
cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

四 、其余相关资料

canvas画贝塞尔曲线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bezier demo</title>
</head>
<body>
<div style="width:800px;height:600px;background-color:#fac0c0;">
<canvas id="cvs" width="800" height="600">骚瑞,您的浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">var cvs=document.getElementById("cvs"),
context=cvs.getContext("2d"),points=[];function getXY(node){var x=0,y=0;if (node.offsetParent)
{while (node.offsetParent)
{x += node.offsetLeft;y += node.offsetTop;node = node.offsetParent;}}
else {node.x && (x += node.x);node.y && (y += node.y);}return [x,y];}
function drawPoint(x,y,c,b) {!b && (b=2);context.fillStyle=c || "red";
context.fillRect(x,y,b,b);}function bezier(points,t){var i,n=points.length-1,x=0,y=0;function fn(p,n,i,t){return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);}for(i=0;i<n+1;i++){x+=fn(points[i][0],n,i,t);
y+=fn(points[i][1],n,i,t);}return [x,y];}function factorial(n){if(isNaN(n) || n<=0 || Math.floor(n)!==n){return 1;}var s=1;
while(n){s*=n--;}return s;}function arrangement(n,r){return factorial(n)/(factorial(r)*factorial(n-r));}
cvs.addEventListener("click",function(event){var i,point=getXY(this),x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft),y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop);points.push([x,y]);context.clearRect(0,0,screen.width,screen.height);context.beginPath();
//pointsfor(i=0;i<points.length;i++){drawPoint(points[i][0],points[i][1],"blue",4);}//bezierfor (i = 0; i < 1; i += 0.001)
{drawPoint.apply(this, bezier(points,i));}//lineif(points.length==1){context.moveTo(points[0][0],points[0][1]);}else if (points.length>1){for(i=0;i<points.length;i++){context.lineTo(points[i][0],points[i][1]);}
context.lineWidth=0.2;context.stroke();context.closePath();}},true);</script>
</body>
</html>

4858美高梅 23 

希望这个内容能够扶持到我们,多谢。

你只怕感兴趣的篇章:

  • CSS3贯彻3D文字动画效果
  • 6款新颖的jQuery和CSS3进度条插件推荐
  • 7款风格新颖的jQuery/CSS3菜单导航分享
  • 7款吸引人眼球的jQuery/CSS3特效实例分享
  • CSS3落到实处动态背景登录框的代码
  • 依照Css3和JQuery完成打字机效果
  • 纯CSS3代码完成滑动开关效果
  • 应用CSS3新性格创立透明边框三角

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有