阿牛博客

css3动画介绍之(二) – (CSS3 transition属性)

今天介绍一下css3里面的CSS3 transition。
CSS3 transition 属性:css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

语法:

transition(transition: property duration timing-function delay;)
transition 属性是一个简写属性,用于设置四个过渡属性:
即:
transition-property(规定设置过渡效果的 CSS 属性的名称。)
transition-duration (规定完成过渡效果需要多少秒或毫秒。)
transition-timing-function (规定速度效果的速度曲线。)
transition-delay(定义过渡效果何时开始。);

注:
transition-property:可以填with,height等等属性,其实,平时工作中写all(代表所有)就可以了。
transition-timing-function:
速度曲线,有5个预设的一个自定义的:
linear 动画从头到尾的速度是相同的;
ease 默认。动画以低速开始,然后加快,在结束前变慢;
ease-in 动画以低速开始;
ease-out 动画以低速结束;
ease-in-out 动画以低速开始和结束;
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

例子:

(linear)-经过我试试~
(ease)-经过我试试~
(ease-in)-经过我试试~
(ease-out)-经过我试试~
(ease-in-out)-经过我试试~

还有个cubic-bezier 平时在工作中用到的比较少,想要深入了解大家可以去谷哥度娘一下。
代码:

下面介绍一个比较综合的例子:

经过我试试~

代码:

上面的例子用到了css的transform属性,上一节有介绍,这里就不多说明了,大家发现没有这些动画鼠标一经过都是同时进行的,可以不可以动画一个一个陆续的执行呢?答案是:可以的。这需要用到css3里面的另外一个属性:animation,下一节我会详细的介绍下animation,敬请关注;

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/90

上一篇: css3动画介绍之(一) - (CSS3 transform属性) » 下一篇: css3动画介绍之(三) – (CSS3 animation属性) »