html5 slide语法,利用css3的transition实现slide

最近感觉自己对css3动画一知半解,没有去认真揣测其中参数的含义。今天利用空闲时间,先从常用的transition来入手。

Transition对应的CSS属性列表:

1、transition-property

* 指定当元素哪个属性改变时执行Transition效果,属性可以时以下属性:none、all以及其他可以触发浏览器reflow或repaint的属性。

* 当指定为none时,动画立即停止,当指定为all的时候,则当元素产生任何属性值变化时都将执行“转换”效果,比如大小改变。

* 初始默认值为all.

2、transition-duration

* 指定“转换”过程的时间,如:1s、none。

* 初始默认值为0.

3、transition-timing-function

* 指定“转换”过程中可用的效果,预设的有:ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(x1, y1, x2, y2),默认值时easy。

* cubic-bezier为通过贝塞尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。

* 初始默认值为default.

4、transition-delay

* 指定一个动画开始执行的时间,即当改变元素属性值后多长时间开始执行“转换效果”

* 初始默认值为0.

有兴趣的可以看看我利用transition实现slide幻灯片demo。

[html]

CSS3 Slide

CSS3 Slide

  • 14023b9db8076a4d4cbf6a451cc3fcdc.png
  • d768de25dddc0a57c67089af2cbad604.png
  • 199c590f82f8e4cc590a7dac59886543.png
  • 14023b9db8076a4d4cbf6a451cc3fcdc.png

[/html]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值