css3动画transition的使用和介绍

时间: 2017-11-30阅读: 419标签: css3

CSS3中可以使用transition来做最简单动画效果,transition表示到一个元素的属性值发生变化时,我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程,这种效果不是立即变化的,而是体现出一种动画过程。在transition出现之前css是没有过渡效果的(时间轴),也就是所有的属性的变化都是即时完成。


transition是由4个属性的合体简写:它们分别是:

ransition-property – 过渡的CSS属性的名称,例如:opacity。
transition-duration – 定义过渡效果花费的时间。默认值为 0。
transition-timing-function – 转变时使用的调速函数(比如, linear、 ease-in 或自定义的 cubic bezier 函数)。
transition-delay -过渡效果何时开始。默认是 0。


实例:

效果:鼠标移动到div上,停留2秒后宽度由100px经1秒的时间变化到200px

<style> 
div{
 width:100px;
 height:100px;
 background:yellow;
 transition-property:width 1s linear 2s;
 -moz-transition:width 1s linear 2s;/* Firefox 4 */
 -webkit-transition:width 1s linear 2s;/* Safari and Chrome */
 -o-transition:width 1s linear 2s;/* Opera */
}
div:hover{
   width:200px;
}
</style>


由于transition是4中属性的简写,因此也可以写为:

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}


transition的使用注意

1、目前,各大浏览器(包括IE 10)都已经支持无前缀的transition,所以transition已经可以很安全地不加浏览器前缀。

2、不是所有的CSS属性都支持transition,完整的列表查看这里,以及具体的效果

3、transition需要明确知道,开始状态和结束状态的具体数值,才能计算出中间状态。比如,height从0px变化到100px,transition可以算出中间状态。但是,transition没法算出0px到auto的中间状态,也就是说,如果开始或结束的设置是height: auto,那么就不会产生动画效果。类似的情况还有,display: none到block,background: url(foo.jpg)到url(bar.jpg)等等。


transition的局限

1、transition需要事件触发,所以没法在网页加载时自动发生。

2、transition是一次性的,不能重复发生,除非一再触发。

3、transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

4、一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

5、CSS Animation就是为了解决这些问题而提出的。


CSS3 动画性能优化

CSS3 动画给 Web 的用户体验带来了巨大提升,本文将尝试从浏览器渲染的角度,来解析动画优化的原理及其技巧。为大家提供一些动画性能优化的参考。

css3实现背景图片颜色修改的多种方式

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

纯css3实现饼状图

网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。

css3增加的的属性值position:stricky

position:sticky,这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位,适用于一些特殊场景。position:sticky 的生效是有一定的限制的

如何使用css3绘制任意角度扇形+动画

使用两个半圆做角度拼接。比如想绘制一个缺口朝右,缺口弧度30度角的扇形,那么将由一个旋转65度角的半圆A+一个旋转-65度角的半圆B组合而成。

css3渐进增强 VS 优雅降级

进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器中使用CSS3,而在低级浏览器只保证最基本的功能。

CSS3+JS实现静态圆形进度条

首先,我们来一个圆(黑色)。接着,再来两个半圆,将黑色的圆遮住。(为了演示,左右两侧颜色不一样),这时候,我们顺时针旋转右侧蓝色的半圆,下面的黑色圆就会暴露出来,比如我们旋转45度(12.5%),效果出来了。

css3中样式计算属性calc()的使用和总结

在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border、margin、pading、font-size和width等属性都可以使用calc来设置动态值。

css3动画讲解,关于css3的@keyframes和animation

通过css3我们可以创建动画,它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的,通过样式来实现的。

理解并使用CSS3中的单位rem vh vw vmin vmax

rem vh vw vmin vmax做为CSS3中的新单位,对CSS3的单位的使用了解是非常重要的,也许你会遇到一个问题可以通过css的这些单位得到解决,同时对于rem,vh和vw,百分比等都是我们做自适应网站常用的方法。