transition :transition【 from Webkit Kernel browser puts forward 】
adopt CSS Implementation elements change from one style to another .


IE I won't support it , Others need suffixes .

transition:transition-property/duration/timing-function/delay Abbreviation .
transition : <'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, ... ];

transition-property: The property name of the transformation .
none、all、 One or more <property>( Comma separated ).

transition-duration: The duration of the . Company s or ms.
<time> The default is 0. No transition effect .

transition-timing-function: Speed curve of transition effect .
linear: uniform , be equal to cubic-bezier(0,0,1,1)
ease: Slow, fast, slow , be equal to cubic-bezier(0.25,0.1,0.25,1)
ease-in: Start slow , be equal to cubic-bezier(0.25,0.1,0.25,1)
ease-out: End with slow , be equal to cubic-bezier(0,0,0.25,1)
ease-in-out: Start and end slowly , be equal to cubic-bezier(0.42,0,0.58,1)
cubiz-bezier(n,n,n,n):【 Three times Bessel 】 stay cubiz-bezier The function defines its own value ,0~1.

                DEMO =>

transition-delay: Specify the start time . Default 0.
Commas separate delay times for multiple attributes .
-moz-transition: color 0.3s ease-out 2s;

Collated from :W3schoolW3cplus

CSS3-transition, More articles on transition examples

  1. CSS3 transition transition

    transition Attribute is a shorthand attribute , Used to set four transition properties : transition: property duration timing-function delay; transition-pro ...

  2. CSS3 Transition transition

    CSS3 There are three properties about animating :Transform,Transition,Animation: Transition: Changes to one or more attributes of an element , Control ( Time and so on ), similar flash It's a little bit of a tonic ...

  3. 【CSS3】transition Transition and animation Animation

    from :http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 Let me write it out front : Recently written css Animation found that tansition and animation get ...

  4. CSS3(2)--- transition (transition)

    CSS3(2)--- transition (transition) One . Concept 1. What is transition Easy to understand It's from a state Gradually transition to Another state . For example, a box used to be 100px, When the mouse clicks, the width of the box becomes 200p ...

  5. IT Brotherhood HTML5 course CSS3 Attribute effects transition transition

    CSS3 Of transition allow css The attribute values of are smoothly transitioned in a certain time interval . This effect can be clicked on the mouse . Focus of attention . Triggered by a click or any change to an element , And smoothly to change the animation effect CSS The attribute value . transitio ...

  6. 【 turn 】CSS3 transition Practical experience in the use of specifications

    The original is translated from :http://blog.jobbole.com/56243/ This article mainly talks about CSS3 transition Specifications and differences in the use of different browsers , For specific solutions or suggestions on how to avoid problems, please refer to another ...

  7. CSS3 transition Practical experience in the use of specifications

    This article mainly talks about CSS3 transition Specifications and differences in the use of different browsers , For specific solutions or how to avoid problems, please refer to another insightful article ,“All You Need to Know Abou ...

  8. CSS3 transition attribute

    transition yes css3 New features added in , stay W3C This is how it is described in the standard :“css Of transition allow css In a certain period of time, the value of the attribute will smoothly transition from one state to another . This can be done with a mouse click . Gain focus ...

  9. CSS 3 Study ——transition transition

    The following contents are translated according to the official norms and their own understanding . 1. Introduce This document describes the implementation of implicit transition CSS New characteristics . As described in the document CSS The new feature describes CSS How the value of an attribute changes smoothly from one value to another in a given time . 2. transition ...

  10. css3 transition animation nick

    Time flies , It's Saturday again , Today, write something that some people despise css play ! transformation Transform properties transform: Browser prefix : -webkit-transform;-o-transform;-moz-transfo ...

Random recommendation

  1. Beta The final meeting

    One , Ideas and goals 1. What's the problem with our software ? Is it clearly defined ? Whether there is a clear description of typical users and typical scenarios ? our app To solve a headache but no one to achieve this specific social distress phenomenon . Because students or social people are participating in the competition ...

  2. JavaEE Basics ( 23 )/ recursive

    1.File Class recursion exercise ( Count the size of the folder ) demand :1, Receive a folder path from the keyboard , Count the size of the folder 2.File Class recursion exercise ( Delete this folder ) demand :2, Receive a folder path from the keyboard , Delete this folder 3.File ...

  3. java How to optimize memory usage ( One )

    java What's the impression of the system ? Occupy Memory ! If you say this, you will have N Many people stand up for java Defend , And give a bunch of performance test reports to prove this . In fact, in theory java The system is no better than other languages The system uses more memory , ...

  4. javascript——ajax application

    Concept AJAX Asynchronous JavaScript And XML(Asynchronous JavaScript And XML).Ajax The core is JavaScript object XmlHttpRequest.XmlHtt ...

  5. obtain sina,baidu,google Financial history and real time stock data interface

    Real time stock data interface There are two ways to obtain stock data :1. http/javascript Interface access data 2. web-service Interface 1.http/javascript Interface access data 1.1Sina Stocks ...

  6. solve samba The server windows Multiple connections

    samba Connect , The user name and password are correct . Failure tips : Multiple connections between a user and a server or shared resource using more than one user name are not allowed . in fact , This is not samba The limitation of . yes Windows The limitation of . In the presence of public = ...

  7. avascript Tips

    avascript Tips   Event source object  event.srcElement.tagName event.srcElement.type  Capture and release  event.srcElement.setCapture() ...

  8. 【 Answer key 】 Luogu P2340 Cows show

    Portal Start coding again Day1 At first glance, it doesn't feel right , It seems that there is no room for this topic , Can't dp... Then came up with an idea , What he asked for was \(dp_{i,j,k}=j+k\), And then isn't that strange ? Direct one dimension ...

  9. VR/AR working principle 、 The existing technical problems

    http://blog.csdn.net/liulong1567/article/details/50686558 Abstract : These challenges , Each one needs a lot of effort to solve . At present, many of them haven't changed in quantity ( Just need ...

  10. Struts1 Implementation of multiple configuration files

    stay Struts 1.0 in , We can only web.xml In Chinese, it means ActionServlet Specify a profile , This is certainly no problem for our online teaching examples , But in the actual application development process , There may be some trouble . Because a lot of people have ...