transition属性

transition属性
语句格式:
transition:<过度属性名称><过度属性时间><过度模式>
transition-property:color;<过度属性名称>
transition-duration:1s;<过度属性时间>
transition-timing-function<过度模式>

过度模式分为以下几种:
ease:缓慢开始,缓慢结束(默认值)
linear:匀速
ease-in:缓慢开始
ease-out:缓慢结束
ease-in-out:缓慢开始,缓慢结束(和ease稍有区别)
当div背景色为黄色,鼠标移动到div上时,背景色逐渐变为红色。
例如使div背景色红色在5秒内缓慢的变为黄色

Paste_Image.png
Paste_Image.png
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 属性何其多,精通一个受益终身(在不被新时代废除的情况下)。今儿我们就来探讨一下css3的transition这个变...
    菜花小噗噗阅读 983评论 0 1
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,344评论 0 11
  • 项目中的一个动效需要用到过度css属性transition,由此发现这个功能真的非常神奇,但是网上对这一属性的介绍...
    春木橙云阅读 1,050评论 0 0
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,810评论 0 2
  • Transition描述: “CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果...
    EnjoyWT阅读 3,226评论 0 0