Deformation and animation in css3 (2)_html/css_WEB-ITnose

Several properties of CSS3 animation: transformation, transition and animation.

Transform has been introduced. Next, transition is introduced.

1. Example

Let’s first understand the animation effect of transition through an example.

Put the mouse on it and the div width will increase from 100px to 200px.

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

This effect is actually an animation, but it changes very quickly and is not smooth.

If you want the div width to smoothly transition to 200px within 5 seconds after the mouse is placed on it. Just add one line of code;

div:hover{    width: 200px;<strong> transition:width 5s ease-in;</strong>}

What is used here is the transition attribute, which is used to achieve smooth transition of attribute values ​​and visually produce animation effects.

The transition used above is the abbreviation and contains four attributes: transition-property, transition-duration, transition-timing-function, transition-delay, which will be introduced one by one below.

2. Transition

CSS3 adds a new transition attribute, which can make the effect more delicate and smooth when the style of an event-triggered element changes.

Transition is used to describe how to make css attribute values ​​​​smoothly transition from one value to another within a period of time. This transition effect can be triggered by mouse click, getting focus, being clicked or any change to the element.

Syntax:

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

Transition has four attribute values:

transition-property: the property to perform the transition.

transition-duration: Specify the time required to complete the transition.

transition-timing-function, during the duration period, the rate of transition transformation changes. A simple understanding is to specify the transition function.

transition-delay: transition delay time.

1. transition-property

transition-property is used to specify which property uses the transition animation effect.

Syntax:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

none: No transition effect is applied to all attributes.

all: Default value. When the value is all, the transition effect will be executed when any attribute value of the element changes.

ident: element attribute name. Specify specific attributes through ident. If a transition effect cannot be applied to one of the multiple specified attributes, the other attributes will still take effect.

Transition attributes can only have transition effects if they have a midpoint value (attributes that need to be animated). All CSS attribute values ​​and value types that can achieve transition effects are listed in w3c. Click here to view.

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: Not all attribute changes will trigger the transiton animation effect, such as the adaptive width of the page. When the browser When changing the width, the transition effect will not be triggered. However, changes in the attribute types shown in the above table will trigger a transition action effect.

For example: You can animate several attributes at the same time, such as setting animation effects for height and line-height at the same time, so that the div becomes taller and the text is still vertically centered.

<!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

transition-duration is used to set the transition from old attributes to new ones The time required for the property, that is, the duration.

3. transition-timing-function

Syntax:

<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>)

The transition-timing-function attribute refers to the "easing" of the transition function". An acceleration curve will be established through this function, so the change speed can continue to change throughout the transition process. It mainly includes the following functions.

ease: Default value, the element style transitions from the initial state to the terminal state from fast to slow, and then gradually slows down.

linear: It means linear transition, that is, the transition process is constant speed.

ease-in: The speed is getting faster and faster, showing an acceleration state, usually called the "gradual effect".

ease-out: The speed is getting slower and slower, showing a deceleration state, usually called the "fading effect".

The ease-in-out speed first accelerates and then decelerates, which is called the "fading effect".

Example: When the mouse passes over the question mark, the help information fades in and 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 class="tips">帮助信息</div>    </div></body></html>

4. transition-delay

transition-delay settings change attributes How long after the value to start executing the animation.

5. Attribute abbreviation

When changing the transition effect of multiple css attributes, separate several transition statements with commas, and then each attribute will have its own transition time and effect. .

Note: The first time is the duration, and the second is the delay.

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

3. Bezier curve and transition

The mathematical model of transition is the Bezier curve, which is introduced below.

Curve is actually the effect of interpolation between two points. Bezier curve is an interpolation algorithm, which is a little more complicated than linear interpolation.

贝塞尔曲线：起始点，终止点（也称锚点），控制点。通过调整控制点，贝塞尔曲线的形状发生变化。

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>

 

开发中可使用下面工具：

缓动函数速查表

图形工具

参考：

cubic-bezier curve.

transition-timing-function

timing-function

下面这篇文章没有原理，但可以让我们从设计师的角度去了解贝塞尔曲线。 

干货！设计师必须掌握的贝塞尔曲线的秘密

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。