transition
A basic transition involving CSS properties is to define and move an element from its rest state (for example, a dark blue background) to its hover or active state (for example, a light blue background).
Transforms can be used together with transformations (as well as raising events such as :hover or :focus) to create some animations. Fade a background color, slide an element and rotate an object all with CSS transitions.
The following is the quoted content: #nav a{ background-color:red; } |
Some parameters to convert
transition-property
Specify the CSS property name of the transform. For example, in the above example, the transform is applied to the background-color property.
transition-duration
Define the time it takes to convert (the time it takes to change from the old attribute to the new attribute)
transition-timing-function
Can be understood as an excessive effect. Specifies the intermediate value during conversion. Can be specified with cubic-bezier. There are of course several commonly used built-in values: ease | linear | ease-in | ease-out | ease-in-out
transition-delay
This is easier to understand, it is the conversion delay time. Time can be a positive integer, a negative integer or zero. When it is non-zero, the unit must be set to s (seconds) or ms (milliseconds). When it is a negative number, the converted action will be displayed from that time point, and the previous action will be truncated. .
Note: The parameter part was added during translation and is not in the original text.
Browser support
As cool as the transform attribute, but currently only supported by WebKit browsers. -moz-transition is already available in recent nightly-build versions of Firefox 3.7. You can also add -moz-transition to your CSS for future enhancements. You can even add a property without the private prefix, just in case.
Animation
Animation is where CSS 3 is most useful. You can combine all the elements we discussed above with animation properties such as animation-duration, animation-name and animation-timing-function to create effects like Flash animations - pure CSS.
The following is the quoted content: #rotate { |
This fantastic CSS animation code and online demo can be seen on the webkit website. The demo can be seen on any website, but the animation effect is only visible on the nightly build version of WebKit on Mac os (Snow Leopard). It looks just like in the video above, and if you're on mac os (snow leopard version), I think it's worth installing a webkit to see the effect for yourself (it's really cool). Windows system users are temporarily unable to appreciate this effect.
Some parameters of animation
The parameters of animation are somewhat similar to those of translate, so if you understand the parameters of translate, it is not difficult to understand here.
animation-name
The name of the animation.
animation-duration
Define the time required for the animation to play once. Default is 0;
animation-timing-function
Define the way animation is played. Parameter settings are similar to transition-timing-function.
animation-delay
Define when the animation starts
animation-iteration-count
Define the number of loops, infinite means unlimited times. The default is 1.
-webkit-animation-direction
The direction of animation playback, two values, the default is normal. At this time, each cycle of animation will play forward. The other value is alternate, then the even-numbered times will be played forward, and the odd-numbered times will be played in the reverse direction.
Browser support
Unfortunately, currently, only a few browsers support CSS animations. 2D CSS animations work in Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira, and other Webkit browsers. Safari 4 (Snow Leopard) supports 3D animation.