CSS 3 animation

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:

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:

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.

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:

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