CSS3 animation effect: 1 basics

There are two kinds of CSS animations: transition effect transition, keyframe animation keyframes

First, transition effect transition

You need to trigger an event (such as hover, click) to change its CSS properties.

Transition effects typically occur when a user floats the mouse pointer over an element

Transition (transition) animations can only define two states

Transition consists of four attribute values:

Transition-property: Performs the Transform property, the default value of all, or the list of CSS property names where the transition effect is applied, separated by commas, such as width,height

Transition-duration: The time, in seconds or milliseconds, that the transformation lasts, eg. 5s

Transition-timing-function: The rate of transformation changes during the continuation period.

Transition-timing-function: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: The transform delay time, in seconds or milliseconds.

Second, key frame animation

@keyframes Key-frame animations like in Flash.

Animate does not need to trigger any events and can change over time, so it can be called directly on the element.

Keyframe animations typically come in two steps: Defining an animation, applying an animation to an element

Step1 Defining animations:

There are two ways to define it: keywords from and to ; or percentages

@keyframe animation name {   time point {       element status   }   time point {      elements state   }}

Such as

@keyframe zoomin{          0% {opacity:0,            transform-origin:center;             Transform:rotate3d (0,0,1,-200deg);            }           100% {            1,            transform-origin:center;             Transform:none;          }   }

Step2 bind animations, apply animations to page elements-take advantage of the animation property.

CSS3 's animation has eight properties

1. Animation-name:keyframe Name
2. Animation-duration: Duration of animation
3. Animation-delay: Delay before animation starts
4. Animation-iteration-count: n|infinite, default value 1
5. Animation-direction:normal|alternate; You should rotate the animation in reverse. Default normal (normal playback) (alternate turns reverse)
6. Animation-play-state
7. Animation-fill-mode
8. Animation-timing-function

The general shorthand is

name Duration timing-function Delay Iteration-count direction;

-webkit-animation:zoomin 2s infinite linear;        Animation:zoomin 1s infinite linear;

Browser compatible:
@-webkit-keyframe

-webkit-animation

CSS3 animation effect: 1 basics