css3 transition原理(动画系列二）

大家好，又见面了，我是你们的朋友全栈君。

CSS3过渡效果（css3 transition）

一、

CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。

通过transition你可以决定哪个属性发生动画效果 (可以通过明确地列出这些属性)，何时开始动画 (通过设置delay), 动画持续多久 (通过设置duration), 以及如何动画 (通过定义timing函数，比如线性地或开始快结尾慢)。

如何定义transition（过渡）

Transition又包含了四个子属性，分别为：

• transition-property,变换延续的时间：
• transition-duration,在延续时间段，
• transition-timing-function,变换的速率变化
• transition-delay：变换延迟时间

二、

CSS3的过渡效果，让一个元素从一种效果转换到另一种效果。 要做到这一点，你必须指定两件事：

1. 指定要添加效果的CSS属性
2. 指定效果的持续时间。

举例说明：

    div
    {
   
   
    transition: width 2s;
    -moz-transition: width 2s; /* Firefox 4 */
    -webkit-transition: width 2s; /* Safari and Chrome */
    -o-transition: width 2s; /* Opera */
    }

注意：如果未指定动画延迟时间，过渡将没有任何效果，因为默认值是0。

鼠标放上去的时候，变换开始：

    div:hover
    {
   
   
    width:300px;
    }

三、

如何执行动画效果？（在哪里定义动画效果？）

css3动画一般通过鼠标事件或者鼠标状态定义动画，通常我们可以用CSS中伪类、使用js修改元素的样式属性或追加删除样式来执行定义的动画。通常我们可以用CSS中伪类和js中的鼠标事件来定义，CSS中伪类执行动画包括：

上面的例子就是使用CSS中伪类执行动画的。 使用js修改元素的样式属性或追加删除样式来执行动画： 一般是鼠标事件操作和定时操作（window.setTimeout()，window.setInterval()）；

还应注意当一个元素使用过渡（transition）后，立即使用.appendChild()将其加入到DOM中或删除其display: none;。这被视为如果初始状态从来没有存在过那么元素总是在它的最终状态。克服这个限制最简单的办法是使用极少毫米数的window.setTimeout()。

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

四、

transition的基本语法：

css3动画通过transition属性和其他css属性（颜色，宽高，变形，位置等等）配合来实现。

1、transition-property（过渡属性）

1. 可以单独指定元素哪些属性改变时执行过渡（transition），可以触发浏览器reflow或repaint的属性那些CSS属性可以应用动画，可参见：https://developer.mozilla.org/zh-CN/docs/CSS/CSS_animated_properties这里列出所有的CSS属性，如果可以做动画，那么会说明是如何设置。
2. 可以指定为all，元素任何可过渡（transition）属性值变化时都将执行过渡（transition）效果。
3. 可以指定为none时，动画立即停止。
4. 初始默认值为all

些属性可以变换？

transition-property:要变化的属性，比如元素变宽则是width，文字颜色要变色这是W3C给出了一个可变换属性的列表：

几乎所有的有色彩、大小或位置等组件的CSS属性，包括许多新添加的CSS3属性， 都可以应用变换。一个值得注意的例外是box-shadow，不过部分浏览器还是对box-shadow添加了支持。

该取值还有个强大的“all”取值，表示上表所有属性；

除了以上属性外，当然还有css3中大放异彩的css3变形，比如放大缩小，旋转斜切，渐变等等。

2、

transition-duration（过渡持续时间）

transition-duration ：<time> [, <time>]*

transition-duration ：动画执行的时间，以秒为单位，比如0.1秒可以写成”0.1s”或者”.1s”，注意后面有个“s”单位

1. 用来指定元素过度过程的持续时间，时间值，1s(秒)，4000ms(毫秒)。
2. 其默认值是0s，也可以理解为无过渡（transition）效果。

3、动画执行的计算方式

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-timing-function ：（过渡时间函数）动画执行的计算方式，这里时间函数是令人崩溃的贝塞尔曲线，幸好

指定CSS属性的变换速率，预设的有：ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2)，默认值时easy：ease：（逐渐变慢）默认值，等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). linear：（匀速），等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). ease-in：(加速)，等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). ease-out：（减速），等同于贝塞尔曲线(0, 0, 0.58, 1.0) ease-in-out：（加速然后减速），等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。w3c文档中表述是所有值需在[0, 1]区域内，否则无效。但一些浏览器下对此没有限制

4、动画延迟

transition-delay ： <time> [, <time>]*

transition-delay：在动作和变换开始之间等待多久，通常用秒来表示(比如, .1s)。如果你不想延迟，该值可省略。

指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行“转换效果”，初始默认值为0； 例如:

5、重叠动画

经常会碰到同一元素会有多个动画同时执行的时侯，比如文字颜色和背景同时变化：

-webkit-transition: color .25s linear , background-color 1s linear;

6、和transform(变形)结合的一些动画

这时候transition-property建议取值为“all”；

典型的应用举例：

放大缩小：

#scale { -webkit-transition: all .3s ease-in-out; }

#scale:hover { -webkit-transform: scale(1.5); }

旋转：

#rotate { -webkit-transition: all 1s ease-in-out;}

#rotate:hover {-webkit-transform: rotate(720deg);}

transition和animation的区别：

1. transition完成后会保留过渡后的状态，而animation会跳至默认状态
2. 后者更精细，具体到每一祯都可以控制，而前者是平滑过渡。

下一篇博客将写一些transition的应用，如在图片上出现文字等，sidebar的切换等

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158416.html原文链接：https://javaforall.cn