For animation:
transition-property
Values: none | all | <property>
Initial Value: all
Description: Specifies what property triggers an animation. A value of none means there is no transition. A value of all means that every animatable property triggers an animation. Otherwise an animation will only trigger when the exact specified property changes value.
transition-duration
Values: <time>
Inital Value: 0
Description: Specifies how long the transition should take. The default is 0.
transition-timing-function
Values: default | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
Initial Value: default
Description: The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bezier function can be given for complete control of the transition function. To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.
The timing function keywords have the following definitions:
linear - The linear function just returns as its output the input that it received.
default - The default function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in - The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out - The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out - The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier - Specifies a cubic-bezier curve whose P0 and P3 points are (0,0) and (1,1) respectively. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).
Top
