CSS 3 animation

transition

Transitions can define different transitions for an element as it switches between different states. Such as switching between pseudo-elements such as :hover, :active or state changes implemented through JavaScript.

Transition is a short property of transition-property/transition-duration/transition-timing-function/transition-delay.

transition-property

Transition-property Specifies the name of the CSS property that sets the transition effect.

There are three values:

value instructions
none No attributes will have a transition effect
all All attributes will have a transition effect
property Defines a comma-separated list of CSS property names that apply transition effects, for exampletransition-property: width,height;

transition-duration

Transition-duration Specifies how many seconds or milliseconds it takes to complete the transition effect.

transition-timing-function

Transition-timing-function Specifies the speed curve for the speed effect.

There are six values:

value instructions
linear Cubic -bezier(0,0,1,1)
ease Slow start, then fast, then slow finish (Cubic – Bezier (0.25,0.1,0.25,1))
ease-in Start at slow speed (equal to cubic-bezier(0.42,0,1,1))
ease-out End at slow speed (equal to cubic-bezier(0,0,0.58,1))
ease-in-out Start and end with slow speed (equal to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) The Bezier curve, which defines its own value in the Cubic – Bezier function, may have values between 0 and 1

transition-delay

Transition-delay defines the delay in starting the transition effect, also timed in s or ms.

Browser support

demo

div {
    width: 100px;
    height: 100px;
    background-color: #51cd8f;
    transition: width 3s ease 0.5 s;
    -moz-transition: width 3s ease 0.5 s; /* Firefox 4 */
    -webkit-transition: width 3s ease 0.5 s; /* Safari and Chrome */
    -o-transition: width 3s ease 0.5 s; /* Opera */
}
div:hover {
    width: 300px;
}
Copy the code

The div width attribute switches between default and hover states using the transition effect.

transform

The transform property applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements.

value instructions
none Definition does not transform
matrix(n,n,n,n,n,n) Define a 2D transformation using a matrix of six values
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Define a 3D transformation using a 4×4 matrix of 16 values
translate(x,y) Defining 2D transformations
translate3d(x,y,z) Defining 3D transformations
translateX(x) Define the transformation, just using the X-axis values
translateY(y) Define the transformation, just using the Y-axis value
translateZ(z) Define the 3D transformation using only the z-axis values
scale(x,y) Define 2D scale transformations
scale3d(x,y,z) Define the 3D zoom transformation
scaleX(x) Define the scale transformation by setting the value of the X axis
scaleY(y) Define the scale transformation by setting the Y-axis value
scaleZ(z) Define the 3D scale transformation by setting the z-axis value
rotate(angle) Define 2D rotation, specifying angles in parameters
rotate3d(x,y,z,angle) Define 3D rotation
rotateX(angle) Defines a 3D rotation along the X axis
rotateY(angle) Define 3D rotation along the Y-axis
rotateZ(angle) Define 3D rotation along the Z axis
skew(x-angle,y-angle) Defines 2D skew conversions along the X and Y axes
skewX(angle) Defines a 2D tilt transformation along the X axis
skewY(angle) Define a 2D tilt transformation along the Y-axis
perspective(n) Define perspective views for 3D transformation elements

Browser support

demo

.child {
    transform: translate(50%.50%);
}
Copy the code

.child {
    height: 100px;
    width: 100px;
    transform: scale(2.2);
}
Copy the code

.child {
    transform: rotate(-90deg);
}
Copy the code

animation

The animation property is a shorthand property that sets six animation properties.

animation-name

Animation-name specifies the name of the keyframe to bind to the selector.

Define an action with @keyframes.

.parent {
    margin: 20px;
    position:relative;
    width: 100px;
    height: 100px;
    background-color: #5171c4;
    animation-name:mymove;
    animation-duration:5s;

    /* Safari and Chrome */
    -webkit-animation-name:mymove;
    -webkit-animation-duration:5s;
}
@keyframes mymove
{
    from {
        left:0px;
    }
    to {
        left:200px; }}@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {
        left:0px;
    }
    to {
        left:200px; }}Copy the code

animation-duration

Animation-duration Specifies how long it takes to complete the animation, in seconds or milliseconds.

animation-timing-function

Animation-timing-function Specifies the speed curve of the animation.

There are six values:

value instructions
linear Cubic -bezier(0,0,1,1)
ease Slow start, then fast, then slow finish (Cubic – Bezier (0.25,0.1,0.25,1))
ease-in Start at slow speed (equal to cubic-bezier(0.42,0,1,1))
ease-out End at slow speed (equal to cubic-bezier(0,0,0.58,1))
ease-in-out Start and end with slow speed (equal to cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n) The Bezier curve, which defines its own value in the Cubic – Bezier function, may have values between 0 and 1

animation-delay

Animation-delay Specifies the delay before the animation starts, also timed in s or ms.

animation-iteration-count

Animation-rotund-count specifies the number of times an animation should play.

The value is either times or infinite, which means an infinite loop.

animation-direction

Animation-direction Specifies whether the animation should be rotated backwards.

There are two values:

Normal indicates normal play, alternate indicates alternate play.

.parent {
    animation-name:mymove;
    animation-duration:5s;
    animation-direction:alternate;
    animation-iteration-count:infinite;

    /* Safari and Chrome */
    -webkit-animation-name:mymove;
    -webkit-animation-duration:5s;
    -webkit-animation-direction:alternate;
    -webkit-animation-iteration-count:infinite;
}
Copy the code

Browser support

demo

A simple balloon bounce animation

#balloon{
    animation: balloonMove 2.5 s infinite;
}
@keyframes balloonMove {
    48% {
        animation-timing-function: cubic-bezier(0.655.0.05.0.755.0.06);
        transform: translate(0, -24px);
    }
    90% {
        transform: translate(0, -7px); }}Copy the code