zoukankan      html  css  js  c++  java
  • transition

    transition:transition-property||transition-duration||transition-timing-function||transition-delay。主要包含这4个属性。

    transition-property:none|all|<ident>.none(没有属性改变);all(所有属性改变)这个也是其默认值;ident(元素属性名);

    transition-duration:<time>.transition-duration是用来指定元素 转换过程的持续时间,取值:<time>为数值,单位为s(秒)或者ms(毫秒),可以作用于所有元素,包括:before和:after伪元素。其默认值是0,也就是变换时是即时的

    transition-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier.ease:(逐渐变慢)默认值;linear:(匀速);ease-in:(加速);ease-out(减速);ease-in-out:(加速然后减速);cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

    transition-delay:<time>.transition-delay是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果,其取值:<time>为数值,单位为s(秒)或者ms(毫秒),其使用和transition-duration极其相似,也可以作用于所有元素,包括:before和:after伪元素。 默认大小是"0",也就是变换立即执行,没有延迟。

    实例:

     transition: all .5s ease-in-out 1s
  • 相关阅读:
    PHP + JQuery 实现多图上传并预览
    推荐40个专业的CMS下载
    10 个有用的 PHP 代码
    2012年最值得关注最具颠覆性的10个创业公司
    在线生成 CSS3 的工具
    循环显示/隐藏图片
    100个推荐的图片/内容滑动条
    jQuery 下拉菜单插件
    20个网站测试工具
    20个免费在线生成网站
  • 原文地址:https://www.cnblogs.com/7-Eleven/p/5635866.html
Copyright © 2011-2022 走看看