CSS3 transition Effects (transition) and animations (animation)

Source: Internet
Author: User

1.Transition

Transition is an intuitive effect that allows a property of a DOM element to be from an old value to a new value within a fixed time. Currently Firefox, Opera, Safari and chrome support transition, IE is not supported.

Syntax: Transition: Property duration timing-function delay;

TRANSITION-PROPERTY Specifies the name of the CSS property to change

Transition-duration How long it takes to specify the effect (S/MS)

Transition-timing-function Specify the speed of the transition effect (linear ease ease-in ease-out ease-in-out cubic-bezier (n,n,n,n))

value Description
Linear Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end.
Ease A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end.
Ease-in Specifies a transition effect that starts at a slow speed (equals Cubic-bezier (0.42,0,1,1)).
Ease-out Specifies a transition effect that ends at a slow speed (equals Cubic-bezier (0,0,0.58,1)).
Ease-in-out Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed.
Cubic-bezier (n,n,n,n) Define your own values in the Cubic-bezier function. The possible values are numbers between 0 and 1.

Transition-delay defining the delay time for transition effects

Lineareaseease-inease-outease-in-out

2. Animation

CSS Animation (animations) simply means that in a fixed period of time in the animation to change its CSS or some value within a certain frequency, so as to achieve visual conversion animation effect. Many aspects of animations can be controlled, including animation run time, start and end values, animation pauses and delays in its start time, and so on.

Currently supported animation browsers are: Firefox, Safari and Chrome,ie and opera are not supported.

Syntax: Animation: name duration timing-function delay Iteration-count direction;

Properties Description CSS
@keyframes Specifies the animation. 3
Animation The shorthand properties for all animated properties, except for the Animation-play-state property. 3
Animation-name Specifies the name of the @keyframes animation. 3
Animation-duration Specifies the seconds or milliseconds that the animation takes to complete a cycle. The default is 0. 3
Animation-timing-function Specifies the speed curve of the animation. The default is "ease". 3
Animation-delay Specifies when the animation starts. The default is 0. 3
Animation-iteration-count Specifies the number of times the animation is played. The default is 1. 3
Animation-direction Specifies whether the animation will play backwards in the next cycle. The default is "normal". 3
Animation-play-state Specifies whether the animation is running or paused. The default is "running". 3
Animation-fill-mode Specifies the state outside the object's animation time. 3

CSS3 transition Effects (transition) and animations (animation)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.