当前位置: 首页 > >

web transform图片旋转_web前端入门到实战:css3实现动画的几种方式

发布时间:






css实现动画主要有3种方式,第一种是:
transition实现渐变动画,第二种是:
transform转变动画,第三种是:
animation实现自定义动画,下面具体讲一下3种动画的实现方式。

transition渐变动画

我们先看一下transition的属性:


property:填写需要变化的css属性如:width,line-height,font-size,color等,所有作用与dom样式的属性;duration:完成过渡效果需要的时间单位(s或者ms)timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)

timing-function具体的值可以看下面的表格:





delay: 动画效果的延迟触发时间(单位ms或者s)

下面我们看一个完整的例子:





友情链接: