css3中变形与动画(二)
2015-07-24 12:23
651 查看
css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation)。
transform介绍过了。接下来介绍过渡transition。
鼠标放上去,div宽度从100px增大到200px。
这效果其实也算是动画,但是非常变化非常快,不平滑。
如果想让鼠标放上去后div宽度在5s内平滑过渡到200px。只需要加一行代码;
这里用到的就是transition属性,它就是用来实现属性值平滑过渡,视觉上产生动画效果。
上面用的transition是缩写,包含四个属性:transition-property,transition-duration,transition-timing-function,transition-delay,下面会一一介绍。
transition用来描述如何让css属性值在一段时间内平滑的从一个值过渡到另一个值。这种过渡效果可以在鼠标点击、获得焦点、被点击或对元素任何改变中触发。
语法:
transition有四个属性值:
transition-property:执行过渡的属性。
transition-duration:指定完成过渡需要的时间。
transition-timing-function,在延续时间段,过渡变换的速率变化,简单理解就是指定过渡函数。
transition-delay:过渡延迟时间。
语法:
none:所有属性都不应用过渡效果。
all:默认值。当值为all时,元素产生任何属性值变化时都将执行transition效果。
ident:元素属性名。通过ident指定具体哪些属性。如果指定的多个属性中有某个属性不能应用过渡效果,其他属性还是生效的。
过渡属性只有具备一个中点值的属性(需要产生动画的属性)才能具备过渡效果。在w3c中列出了所有可以实现transition效果的css属性值以及值的类型,点这里查看。
View Code
开发中可使用下面工具:
缓动函数速查表
图形工具
http://matthewlein.com/ceaser/
参考:
cubic-bezier curve.
transition-timing-function
timing-function
下面这篇文章没有原理,但可以让我们从设计师的角度去了解贝塞尔曲线。
干货!设计师必须掌握的贝塞尔曲线的秘密
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:/article/5239309.html有问题欢迎与我讨论,共同进步。
transform介绍过了。接下来介绍过渡transition。
一、例子
先通过一个例子感性认识一下transition的动画效果。鼠标放上去,div宽度从100px增大到200px。
<style type="text/css"> div{ width: 100px; height: 100px; background-color: red; } div:hover{ width: 200px; } </style> <div></div>
这效果其实也算是动画,但是非常变化非常快,不平滑。
如果想让鼠标放上去后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属性值以及值的类型,点这里查看。
<!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(); //points for(i=0;i<points.length;i++){ drawPoint(points[i][0],points[i][1],"blue",4); } //bezier for (i = 0; i < 1; i += 0.001) { drawPoint.apply(this, bezier(points,i)); } //line if(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>
View Code
开发中可使用下面工具:
缓动函数速查表
图形工具
http://matthewlein.com/ceaser/
参考:
cubic-bezier curve.
transition-timing-function
timing-function
下面这篇文章没有原理,但可以让我们从设计师的角度去了解贝塞尔曲线。
干货!设计师必须掌握的贝塞尔曲线的秘密
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:/article/5239309.html有问题欢迎与我讨论,共同进步。
相关文章推荐
- Web学习篇之---css基础知识(一)
- 弹框CSS、JS
- 浅谈 css3 box盒子模型以及box-flex的使用
- CSS使用overflow隐藏超出范围的内容
- CSS overflow:hidden 属性含义
- CSS3变形记(上):千变万化的Div
- 好吧,CSS3 3D transform变换,不过如此!
- 关于HTML和CSS的学习心得
- CSS Reset方法及它的滥用
- 不规则混排实现(实现图文环绕的效果)
- 常见CSS布局疑难问题及其解决
- 细说css3 flex布局之flex容器属性
- CSS3 3D效果 实现一个可旋转的正方体
- CSS position属性
- 学习CSS(8)
- CSS 之float
- 关于CSS样式的笔记
- 学习CSS(7)
- CSS学习笔记——简述
- CSS设置边框圆角效果