CSS3 Animation Transition Animation

Introduction to CSS Animation transition animation

Transition transition:CSS3 introduces the concept of time through the transitions attribute, automatically calculates the intermediate state through the start and end states, and realizes the transition effect of the state change.

Transition-property: CSS properties for applying transitions

Transition-duration: Time of transition effect

Transition-timing-function: Time curve for transition effect (state change speed)

Ease (default, gradually slows), linear, ease-in (acceleration), ease-out (deceleration), Cubic-bezier function (three Bezier curves), custom speed mode

Cubic-bezier three times Bezier curve

Transition-delay: When the transition effect starts (seconds, milliseconds)

　　　　

The three-time Bezier curve is a good model for simply describing rate curves, such as Chrome Dev-tools

CSS3 Transitions Browser support conditions Can I use ie10+ support without prefix transition attribute

Use Note:

Not all CSS Properties support transition

Transition need to know the specific values of the start and end states in order to calculate the intermediate state.

Eg,height Intermediate state from 0px to auto, display:none to Block,background:url (foo.jpg) to URL (bar.jpg)

Transition Usage Limitations

Transition requires event triggering and cannot occur automatically when a page is loaded.

Transition are disposable and cannot be repeated unless triggered repeatedly

Transiton can only define the start and end states, and cannot define an intermediate state.

Animation

@keyframes to create keyframes for animation (animation name, percentage of animation duration)

@keyframes myanimation {from {background: red;} 50% { background: green;} 100% { background: blue;} }

Animation: Shorthand properties for all animated properties

Animation-name: Name of the animation created by the referenced @keyframes

Animation-duration, Animation-timing-function, Animation-delay,

Animation-iteration-count: Digital/infinite| (default 1), Animation-direction:normal/alternate (whether the animation plays backwards in the next cycle)

Animation-play-state:paused/running (default),

Animation-fill-mode:none (default)/forwards/backwards/both, which immediately jumps back from the end state to the start state when the animation is finished.

None (default), back to the state when the animation did not start

Forwards let the animation stay in the end state,

Backwards back to first frame state

Both forward and backward fill modes are applied

Note: A browser transition from one state to another is a smooth transition. The steps function allows for distributed transitions

eg div:hover {animation:1s rainbow Infinite Steps (10)}//to achieve font printing effect

CSS3 Animation Transition Animation