前端 CSS3动画

虽说IE9以及更早版本的IE浏览器都不支持css3动画,但是IE6-8浏览器已是江河日下,使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多,所以如果很简单的就能让一部分人获得更好的用户体验,那何乐而不为呢。

从广义上来讲,css3动画可以分为两种。

过渡动画

第一种叫过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形(transform)等等这些属性。css过渡只能定义首和尾两个状态,所以是最简单的一种动画。

要想使一个元素产生过渡动画,首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property:规定对哪个属性进行过渡

transition-duration:定义过渡的时间,默认是0

transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等,默认是 ease

transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0

为了书写方便,也可以把这四个属性按照以上顺序简写在一个 transition 属性上:

如果是使属性的默认值,则可以省略:

相当于:

如果想要同时过渡多个属性,可以用逗号隔开,如:

使用transtion属性只是规定了要如何去过渡,要想让动画发生,还得要有元素状态的改变。如何改变元素状态呢,当然就是在css中给这个元素定义一个类(:hover等伪类也可以),这个类描述的是过渡动画结束时元素的状态。

这样,当我们把鼠标移动到div上的时候,div的状态发生了变化,就能看到宽度从100到400,高度从100到400,背景颜色从黑到红的,过渡时间为3秒的过渡效果了。

除了使用hover等系统提供的伪类外,我们也可以随意的定义自己的类,然后想要过渡时就通过js把类加到元素上面:

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181201A0UNF000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券