다음은 CSS3의 변형과 애니메이션 효과를 그림과 텍스트를 통해 보여드리겠습니다
CSS3 애니메이션의 여러 속성: 변환, 전환 및 애니메이션.
아래 소개: 전환.
1. 예시
먼저 예를 통해 전환의 애니메이션 효과를 이해해 보겠습니다.
마우스를 올려놓으면 div 너비가 100px에서 200px로 늘어납니다.
<style type="text/css"> div{ width: 100px; height: 100px; background-color: red; } div:hover{ width: 200px; }</style><div></div>
이 효과는 실제로 애니메이션이지만 매우 빠르게 변화하고 부드럽지 않습니다.
마우스를 올려놓은 후 5초 이내에 div 너비가 200px로 원활하게 전환되기를 원하는 경우. 코드 한 줄만 추가하세요.
이 효과는 실제로 애니메이션이지만 매우 빠르게 변화하고 부드럽지 않습니다.
마우스를 올려놓은 후 5초 이내에 div 너비가 200px로 원활하게 전환되기를 원하는 경우. 코드 한 줄만 추가하세요.
여기서 사용되는 것은 전환 속성으로, 속성 값의 원활한 전환을 달성하고 시각적 애니메이션 효과를 생성하는 데 사용됩니다.
위에서 사용된 전환은 약어이며 전환 속성, 전환 지속 시간, 전환 타이밍 함수, 전환 지연의 네 가지 속성을 포함합니다. 이에 대해 아래에서 하나씩 소개하겠습니다.
2. 전환
CSS3에는 이벤트로 인해 발생하는 요소의 스타일이 변경될 때 효과를 더욱 섬세하고 부드럽게 만들 수 있는 새로운 전환 속성이 추가되었습니다.
transition은 CSS 속성 값을 일정 시간 내에 한 값에서 다른 값으로 원활하게 전환하는 방법을 설명하는 데 사용됩니다. 이 전환 효과는 마우스 클릭, 초점 잡기, 클릭 또는 요소 변경에 의해 발생할 수 있습니다.
구문:
transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
전환에는 4가지 속성 값이 있습니다.
transition-property: 전환을 수행하는 속성입니다.
transition-duration: 전환을 완료하는 데 필요한 시간을 지정합니다.
전환 타이밍 기능은 지속 기간 동안 전환 변환 속도가 변경되는 것으로 간단히 이해하면 전환 기능을 지정하는 것입니다.
transition-delay: 전환 지연 시간.
1. 전환 속성
전환 속성은 전환 애니메이션 효과를 사용하는 속성을 지정하는 데 사용됩니다.
구문:
모두: 기본값입니다. 값이 all이면 해당 요소의 속성 값이 변경될 때 전환 효과가 실행됩니다.
ident: 요소 속성 이름. ident를 통해 특정 속성을 지정합니다. 지정된 여러 속성 중 하나에 전환 효과를 적용할 수 없는 경우에도 다른 속성은 계속 적용됩니다.전환 속성은
중간값 (애니메이션이 필요한 속성)이 있는 경우에만 전환 효과를 가질 수 있습니다. 전환 효과를 얻을 수 있는 모든 CSS 속성 값과 값 유형은 w3c 에 나열되어 있습니다.
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
참고: 모든 속성 변경이 페이지의 적응형 너비와 같은 전환 애니메이션 효과를 트리거하는 것은 아닙니다. 브라우저가 너비를 변경하면 전환 효과가 트리거되지 않습니다. 그러나 위 표에 표시된 속성 유형을 변경하면 전환 작업 효과가 트리거됩니다.
예: 높이와 줄 높이에 대한 애니메이션 효과를 동시에 설정하는 등 여러 속성에 동시에 애니메이션을 적용하여 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>
2. 전환 기간
Transition-duration은 이전 속성에서 새 속성으로 전환하는 데 필요한 시간, 즉 기간을 설정하는 데 사용됩니다.
3. 전환 타이밍 기능
구문:
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>
4、transition-delay
transition-delay设置改变属性值后多长时间开始执行动画。
5、属性简写
在改变多个css属性的transition效果时,把几个transition声明用逗号隔开,然后每个属性就都有各自的过渡时间和效果。
Note:第一个时间是时长,第二个是延时。
三、贝塞尔曲线和transition
transition的数学模型就是贝塞尔曲线,下面介绍。
曲线其实就是两点之间插值的效果,贝塞尔曲线是一种插值算法,比线性插值复杂一点。
贝塞尔曲线:起始点,终止点(也称锚点),控制点。通过调整控制点,贝塞尔曲线的形状发生变化。
k阶贝塞尔插值算法需要k+1个控制点。
一阶贝塞尔曲线(线段):意思就是从P0到P1的连续点,用来描述一段线段。一次贝塞尔插值就是线性插值。
二阶贝塞尔曲线(抛物线):P0-P1是曲线在P0处的切线。
三阶贝塞尔曲线:
transition用到的就是三阶贝塞尔插值算法,如下图。
时间在0,1区间,待变换属性也认为是0,1区间。P0和P3的坐标一直是(0,0)和(1,1)。transition-timing-function属性用来确定P1和P2的坐标。
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>
希望这些内容可以帮助到大家,谢谢。