In this article, we will introduce the transitions and animations added to CSS3

1, transition

With CSS3, we can make elements add transitions to style transformations without using Flash or JavaScript

(1) Attribute name

You can use transition-property to specify the name of the property to which the transition effect is applied. When the specified property changes, the transition effect takes effect

Possible values are as follows:

  • none: Indicates that no attribute gets transition effect. Default value
  • all: indicates that all attributes have the transition effect
  • The name list: Specifies a comma-separated list of properties to obtain the transition effect

(2) Action time

Transition-duration specifies the duration of the transition effect, which accepts a time value (default: 0)

Therefore, the transition-duration property must be set when using the transition effect, otherwise the transition effect will not be visible

(3) Action speed

You can use transition-timing-function to specify the speed curve of the transition effect. The options are as follows:

  • linear: At the same speed from start to finish
  • ease: The default value, starts slow, then speeds up and ends slow
  • ease-in: Start slow
  • ease-out: End at a slow speed
  • ease-in-out: Start slow, end slow

(4) Delay time

You can use transition-delay to delay the start of the transition effect. This property also accepts a time value, which defaults to 0

(5) Shorthand attributes

For convenience, you can set all the transition properties only in the Transition property

transition: property duration timing-function delay;
Copy the code

A simple example is as follows:

<! DOCTYPEHTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
    }
    div:hover {
        width: 300px;
    }
    .withTransition {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
        transition: width 1s ease;
        -o-transition: width 1s ease;      /* Opera */
        -moz-transition: width 1s ease;    /* Firefox */
        -webkit-transition: width 1s ease; /* Safari and Chrome */
    }
    /* When the mouse hovers over the div element, the width changes to create a transition effect */
    </style>
</head>
<body>
    <div></div>
    <br/>
    <div class="withTransition"></div>
</body>
</html>
Copy the code

2, animation,

CSS3 allows you to animate web pages without using Flash or JavaScript

(1) Animation name

You can specify the animation name using the animation-name attribute, which has two optional values:

  • none: No animation, generally used to override animation effects from cascades
  • The name of the: Defines the animation name

(2) Broadcast time

You can use animation-duration to specify the duration of the animation effect, which takes a time value, default to 0

Therefore, when using animation, the animation-duration property must be set, otherwise the animation will not be visible

(3) Playback rate

You can use animation-timing-function to specify the speed curve of the animation effect. The options are as follows:

  • linear: At the same speed from start to finish
  • ease: The default value, starts slow, then speeds up and ends slow
  • ease-in: Start slow
  • ease-out: End at a slow speed
  • ease-in-out: Start slow, end slow

(4) Delay time

Animation-delay can be used to delay the start of animation effects. This property also accepts a time value, which defaults to 0

(5) Times of playback

The animation-rotund-count property can be used to specify the number of times an animation can be played. The options are as follows:

  • digital: indicates the number of playback times. The default value is 1
  • infinite: indicates unlimited play

(6) Broadcasting direction

You can specify the direction of the animation by using the animation-direction property. The options are as follows:

  • normal: Default value, normal playback
  • alternate: Take turns to play in reverse

(7) Playing state

You can specify the playback state of the animation using the animation-play-state property. The options are as follows:

  • running: Default value, playing
  • pausedSuspended:

(8) Clearance visibility

You can use the animation-fill-mode property to specify the visibility of the effect before or after the animation is played. The options are as follows:

  • none: Does not change the default behavior
  • forwardsKeep the last property values (defined in the last keyframe) after the animation is complete
  • backwards: Applies the starting property value (defined in the first keyframe) before the animation is displayed
  • both: Applies the starting property value before the animation is displayed, and retains the last property value after the animation is complete

(9) Shorthand attributes

For convenience, you can set all of the animation-related properties only in the Animation property

animation: name duration timing-function delay iteration-count direction;
Copy the code

(10) @keyframes rule

The idea behind animation is to gradually transform one set of CSS styles into another

We can use the Keyframes rule to create a continuous animation by defining the CSS style of the keyframes by percentage

In addition to using percentages, you can also define keyframes using keywords such as from (for 0%) and to (for 100%).

A simple example is as follows:

<! DOCTYPEHTML>
<html>
<head>
    <style>
    div {
        width: 100px;
        height: 100px;
        background: LightSkyBlue;
        position: relative;
        animation: test 2s linear infinite alternate;
        -webkit-animation: test 2s linear infinite alternate; /*Safari and Chrome*/
    }

    @keyframes test {
        from { left: 0px; }
        to { left: 200px; }}@-webkit-keyframes test { /*Safari and Chrome*/
        from { left:0px; }
        to { left:200px; }}</style>
</head>
<body>
    <div></div>
</body>
</html>
Copy the code