欢迎来到山村网

CSS变换计时与延迟

2019-03-29 00:55:33浏览:434 来源:山村网   
核心摘要:  -webkit-transition -moz-transition -o-transition transition  CSS property  被变换的属性(比如, color)。  Durati

  -webkit-transition -moz-transition -o-transition transition

  CSS property

  被变换的属性(比如, color)。

  Duration

  变换持续的时间,通常以秒来计算(比如, .25s).

  Timing function

  允许你控制持续的时间的计算方式。与其使用一个简单的线性计算,你可以使变换加速(渐入)或者减速(淡出),或者甚至specify a beat or count (比如,linear). More on this later in the article.

  Delay

  在动作和变换开始之间等待多久,通常用秒来表示(比如, .1s)。如果你不想延迟,该值可省略。

  CSS属性

  color 色彩

  crop 百分比

  font-weight 数字

  height 百分比,长度

  letter-spacing 长度

  line-height 百分比,长度,数字

  opacity 数字

  outline-offset 整数

  outline-width 长度

  right 百分比,长度

  text-indent 百分比,长度

  text-shadow 阴影

  vertical-align 百分比,长度,关键词

  visibility 可见性

  word-spacing 百分比,长度

  z-index 正整数

  zoom 数字

  变换计时与延迟

  使用变换,你可以改变变换的速率,在开始的时候较慢然后在结束的时候加速,反之亦然,或者之间的任何事情。CSS变换有5个计时的关键词,同时也允许你自己定义你自己的计时曲线。

  cubic-bezier(x1, y1, x2, y2) X 和 Y 值在0到1之间,以定义用于Time function的贝塞尔曲线的形状。

  linear 均速

  ease 逐渐慢下来

  ease-in 加速(渐入)

  ease-out 减速(淡出)

  ease-in-out 加速然后减速

(责任编辑:豆豆)
下一篇:

视觉引导提高邮件营销转化率

上一篇:

网页设计中纹理的运用技巧

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com