Note source: Silicon Valley Web front-end HTML5&CSS3 beginners zero basic entry complete version

[TOC]

Transitions and animation

1, transition

Transition

  • Transitions allow you to specify how to switch when a property changes
  • Transitions can create some really nice effects and enhance the user experience

Attribute values

Transition-property: Specifies the property to perform the transition

  • Used between multiple attributes.Separated;
  • If all attributes need to be transitionedallKey words;
  • Most attributes support transition effects;
  • Note that the transition must be from one valid value to another.

Transition-duration: specifies the duration of the transition effect

  • Time unit: S and MS (1s=1000ms)

Transition-delay: The delay in executing the transition effect after a period of time

Transition-timing-function: a timing function for transitions

  • linearUniform motion
  • easeDefault, slow start, speed up and then slow down
  • ease-inAccelerated motion
  • ease-outSlow motion
  • ease-in-outSpeed up and then slow down
  • cubic-bezier()To specify the timing functioncubic-bezier.com
  • steps()To perform the transition effect step by step, you can set the second value:
    • endPerform the transition at the end of time (default)
    • startPerform transitions at the beginning of time

Transition: You can set all transition-related properties at the same time

  • The only requirement is that if you want to write delay, the first of the two times is the duration and the second is the delay time

The sample

/* transition: margin-left 2s 1s; * /
transition-property: margin-left;
transition-duration: 2s;
transition-delay: 1s;
Copy the code

Comparison of several transition effects

Motion is uniform

transition-timing-function: linear;
Copy the code

Ease, the default value, starts slowly, speeds up and then slows down

transition-timing-function: ease;
Copy the code

Ease-in accelerates exercise

transition-timing-function: ease-in;
Copy the code

Ease-out deceleration

transition-timing-function: ease-out;
Copy the code

Ease-in-out accelerates first and then slows down

transition-timing-function: ease-in-out;
Copy the code

Cubic -bezier() to specify the timing function

transition-timing-function: cubic-bezier(.17.1.79.68, -0.69);
Copy the code

Steps () Performs the transition effect in steps

/* transition-timing-function: steps(2, end); * /
transition-timing-function: steps(2);
Copy the code

transition-timing-function: steps(2, start);
Copy the code

2, animation,

Animations and transitions are similar in that you can achieve some dynamic effects, but the difference is

  • Transitions need to be triggered when a property changes
  • Animations can trigger dynamic effects automatically

To set the animation effect, you must first set a keyframe, which sets the animation to perform each step

@keyframes test {
    from {
        margin-left: 0;
    }

    to {
        margin-left: 900px; }}Copy the code

Animation-name Specifies the keyframe name of the animation

Animation-duration: Specifies the duration of the animation effect

Animation-delay: The delay of the animation effect. The animation is executed after a certain period of time

Animation-timing -function: timing function of the animation

Animation-iteration -count The number of times an animation is executed

  • infiniteInfinite perform

Animation-direction Specifies the direction in which the animation will run

  • normal 从fromtotoRun, every time, default
  • reverse 从totofromRun, every time
  • alternate 从fromtotoRun in reverse when the animation is repeatedly executed
  • alternate-reverse 从totofromRun in reverse when the animation is repeatedly executed

Animation-play-state Sets the execution state of the animation

  • runningAnimation execution, default
  • pausedSuspended animation

Animation-fill-mode Specifies the fill mode of the animation

  • noneAnimation completes, element returns to original position, default
  • forwardsWhen the animation is complete, the element stops at the end of the animation
  • backwardsThe element is in the starting position while the animation waits
  • bothCombined with theforwardsandbackwards

The sample

/* animation-name: test; animation-duration: 2s; animation-delay: 2s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: both; * /

animation: test 2s 2s linear infinite alternate both;
Copy the code

3, in actual combat

M rabbit

.box {
    height: 271px;
    width: 132px;
    background-image: url("/ assets/m/bigtap - rabbit mitu - queue - big. PNG");
    margin: 100px auto;
    transition: background-position 1s steps(4);
}

.box:hover {
    background-position: -528px 0;
}
Copy the code

Running boy

.box {
    height: 256px;
    width: calc(1536px/6);
    background-image: url("/assets/ Running Boy /bg2.png");
    margin: 100px auto;
    animation: run 1s steps(6) infinite;

}

/* Keyframe */
@keyframes run {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -1536px 0; }}Copy the code

Bounce the ball

.outer {
    width: 100%;
    height: 700px;
    border-bottom: 10px solid # 000;
    /* Margin overlap, open BFC */
    overflow: hidden;
}

.ball {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: gray;
    animation: bounce 6s ease-in;
}

@keyframes bounce {
    from {
        margin-top: 0;
    }

    5%.15%.25%.35%.45%.55%.65%.75%.85%.95%.98%.to {
        margin-top: 600px;
        animation-timing-function: ease-out;
    }

    10%.20%.30%.40%.50%.60%.70%.80%.90% {
        animation-timing-function: ease-in;
    }

    10% {
        margin-top: 60px;
    }

    20% {
        margin-top: 120px;
    }

    30% {
        margin-top: 180px;
    }

    40% {
        margin-top: 240px;
    }

    50% {
        margin-top: 300px;
    }

    60% {
        margin-top: 360px;
    }

    70% {
        margin-top: 420px;
    }

    80% {
        margin-top: 480px;
    }

    90% {
        margin-top: 540px;
    }

    96% {
        margin-top: 580px;
    }

    99% {
        margin-top: 590px; }}Copy the code

Cool the ball

div {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: bounce .5s infinite ease-in alternate;
}

.ball1 {
    background-color: red;
    animation-delay:.1s;
}

.ball2 {
    background-color: yellow;
    animation-delay:.2s;
}

.ball3 {
    background-color: green;
    animation-delay:.3s;
}

.ball4 {
    background-color: blue;
    animation-delay:.4s;
}

.ball5 {
    background-color: pink;
    animation-delay:.5s;
}

.ball6 {
    background-color: orange;
    animation-delay:.6s;
}

.ball7 {
    background-color: fuchsia;
    animation-delay:.7s;
}

.ball8 {
    background-color: gray;
    animation-delay:.8s;
}

.ball9 {
    background-color: darkcyan;
    animation-delay:.9s;
}

.ball10 {
    background-color: indigo;
    animation-delay: 1s;
}

.ball11 {
    background-color: black;
    animation-delay: 1.1 s;
}

.ball12 {
    background-color: darkcyan;
    animation-delay: 1.2 s;
}

.ball13 {
    background-color: darkkhaki;
    animation-delay: 1.3 s;
}

.ball14 {
    background-color: brown;
    animation-delay: 1.4 s;
}

.ball15 {
    background-color: mediumpurple;
    animation-delay: 1.5 s;
}

@keyframes bounce {
    from {
        margin-top: 0;
    }

    to {
        margin-top: 500px; }}Copy the code