zoukankan      html  css  js  c++  java
  • [转] CSS transition

    https://css-tricks.com/almanac/properties/t/transition/

    The transition property is a shorthand property used to represent up to four transition-related longhand properties:

    .example {
        transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    }

    These transition properties allow elements to change values over a specified duration, animating the property changes, rather than having them occur immediately. Here is a simple example that transitions the background color of a <div> element on :hover:

    div {
      transition: background-color 0.5s ease;
      background-color: red;
    }
    div:hover {
      background-color: green;
    }

    That div will take half a second when the mouse is over it to turn from red to green. Here is a live demonstration of such a transition:

    You can specify a particular property as we have above, or use a value of "all" to refer to transition properties.

    div {
      transition: all 0.5s ease;
      background: red;
      padding: 10px;
    }
    div:hover {
      background: green;
      padding: 20px;
    }

    In this above example, both background and padding will transition, due to the value “all” specified for the transition-property portion of the shorthand.

    You may comma separate value sets to do different transitions on different properties:

    div {
      transition: background 0.2s ease,
                  padding 0.8s linear;
    }

    For the most part, the order of the values does not matter -- unless a delay is specified. If you specify a delay, you must first specify a duration. The first value that the browser recognizes as a valid time value will always represent the duration. Any subsequent valid time value will be parsed as the delay.

    Some properties cannot be transitioned because they are not animatable properties. See the spec for a full list of which properties are animatable.

    By specifying the transition on the element itself, you define the transition to occur in both directions. That is, when the styles are changed (e.g. on hover on), they properties will transition, and when the styles change back (e.g. on hover off) they will transition. For example, the following demo transitions on hover, but not on hover off:

    This happens because the transition has been moved to the :hover state selector and there is no matching transition on the selector that targets the element directly without the :hover state.

    For compatibility in all supporting browsers, vendor prefixes are required, with the standard syntax declared last:

    .example {
        -webkit-transition: background-color 500ms ease-out 1s;
        -moz-transition: background-color 500ms ease-out 1s;
        -o-transition: background-color 500ms ease-out 1s;
        transition: background-color 500ms ease-out 1s;
    }

    IE10 (the first stable version of IE to support transition) does not require the -ms- prefix.

     

  • 相关阅读:
    Codeforces 362D Fools and Foolproof Roads 构造题
    Machine Learning—Mixtures of Gaussians and the EM algorithm
    Php面向对象 – 单例模式
    标C编程笔记day06 动态分配内存、函数指针、可变长度參数
    html的下拉框的几个基本使用方法
    【创新培育项目】为什么要组队參加比赛?及如何寻找一个合适的选题?
    项目管理心得:一个项目经理的个人体会、经验总结
    GMM的EM算法实现
    oracle中LAG()和LEAD()等分析统计函数的使用方法(统计月增长率)
    sql server 2005 32位+64位、企业版+标准版、CD+DVD 下载地址大全
  • 原文地址:https://www.cnblogs.com/qiangxia/p/5386426.html
Copyright © 2011-2022 走看看