稻草日志分享:css3的过渡效果,transition有几个属性?

王亚兵6个月前 (10-09)HTML5CSS384

前面的分享中,我们了解了transform的2d变换,可能很多人会有疑问。这些变换都是静态的变换,如果有什么东西让它在移动,缩放,旋转的过程中有一个连续,会不会形成一个动态的效果,当然在css3中,可以定义和调用我们的一个动画效果,但是今天我们先给大家介绍一个简单的过度效果就是我们的transition属性,那么他有多少个属性值呢?

首先我们要知道,transition的意思就是过渡的意思。它其实有四个属性值分别是:transition-property这是我们过度的名称,也就是说我们想对哪一个属性的改变实行过度。但是我们一般经常用的是none无,all全部,以及我们的indent继承。但是我们最最常用的就是all了。

第二个属性是,transition-duration这个是来确定我们过渡的延续时间,可以是以s秒为单位,也可以i是以ms毫秒为单位。另外还有一个transition-detay这个是动作开始的时间也是以s或者ms为单位的。也就是在我们打开网页而后多长时间开始,一般我们很少设置这个属性。

最后一个比较重要的一个属性就是transform-timing-function这个是来调过渡过程中的一个动画曲线的。为了让我们的过渡更加的子软和丝滑。如果了解过动画制作,应该比较好理解,动画的十二要素,也可以说是12原则,一般就是缓入缓出。他的属性值是:

transition属性有哪些

下面我简单的通过一个案例来让大家看一下这个过渡究竟是一个什么样的一个效果,首先我们还是需要一个div,还是同样的100px。同样的蓝色。我们设置当我们的鼠标经过时,放生一个简单的放大效果代码如图:

transition属性有哪些

这里需要注意的是,我们给谁设置过渡,需要把transition属性设置到对应的标签里,比如我们想让我们的div进行过渡,就需奥我们在div中写我们的transition属性。这是一定要注意的。好了今天稻草日志的分享就到这里了,希望大家能掌握transition的用法,以及了解他的四个常用的属性。

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。