Write your own code base (CSS3 common animation implementation)

1. Introduction

At the beginning of the month, the CSS3 warm-up game was released — transitions and animations (cool dropdown, accordion, seamless scrolling). Js code base has also been published twice, two articles. Before also wrote the CSS3 warm-up combat, since the warm-up finished, it is time to start packaging CSS3 code base, compared to js code base, CSS3 code base logic is more simple! It can be said that as long as the annotation and a sketch can let everyone understand the principle among them! When I write the code base, the animation effect mainly refers to three open source projects, nec, hover. CSS, animate. CSS these three projects are very high quality, I suggest you to understand. Source code has been put on Github above, you can go to see, but also welcome everyone star! Ec – CSS.

By pointing out these three libraries, I’m not asking you to take someone else’s code, modify it a little bit, or just copy it into your own project and call it your own. I am asking people to look at other people’s code, learn other people’s implementation methods or animation effects, and then use their own way to implement, of course, if other people’s projects, add, delete, change and check beyond recognition, this I personally feel can be said to be their own project! It is important not to copy other people’s code directly and put it into your own project, and then say it was developed by yourself. This does not respect other people’s results, and it is less helpful to improve your own technical level. I write articles, although will also give the code, but my purpose is to provide everyone reference, hope to let everyone learn knowledge or divergent thinking, write better works. As I said before, my purpose in writing is to teach people how to fish, not to give them fish.

The statement

1. You’ll see a lot of them belowThings like this, all span tags, all styles are given in CSS

span{
        cursor: pointer;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        color: # 333;
        background: #ccc;
        min-width: 80px;
        padding: 0 10px;
        margin: 10px;
    }Copy the code

L stands for left, R stands for right, T stands for top, B stands for bottom, C stands for center and M stands for middle. Bear in mind that

1. Write some hover animation and default animation effect, and post code 2. Find a few animation combinations, and add infinite animation, reverse animation, will have a different effect, and continue to research, see if you can research different things!

2. Hover animation

With that said, it’s time to move on to the main body,

The first is hover animation, about this concept, I explain, is the mouse moved up to trigger the animation, is triggered mouse hover event can see the animation! Below, according to type, write one by one!

2-1. Simple animation

Minus 2 minus 1

html

<span class="ech-big">big</span>
<span class="ech-small">small</span>Copy the code

css

.ech-big..ech-small {
    transition: all .4s;
}
.ech-big:hover{
    transform: scale(1.2);
}
.ech-small:hover{
    transform: scale(. 9); }Copy the code

2 minus 1 minus 2

html

<span class="ech-skew-l">skew-l</span>
<span class="ech-skew-r">skew-r</span>
<span class="ech-skew-l-t">skew-l-t</span>
<span class="ech-skew-r-t">skew-r-t</span>
<span class="ech-skew-l-b">skew-l-b</span>
<span class="ech-skew-r-b">skew-r-b</span>Copy the code

css

.ech-skew-l..ech-skew-r..ech-skew-l-t..ech-skew-r-b..ech-skew-l-b..ech-skew-r-t{
    transition: all .4s;
}
.ech-skew-l:hover {
    transform: skew(-15deg);
}
.ech-skew-r:hover {
    transform: skew(15deg);
}
.ech-skew-l-t:hover {
    transform: skew(-15deg);
}
.ech-skew-r-t:hover {
    transform: skew(15deg);
}
.ech-skew-l-b:hover {
    transform: skew(-15deg);
    transform-origin: 100% 0;
}
.ech-skew-r-b:hover {
    transform: skew(15deg);
    transform-origin: 100% 0;
}
Copy the code

2-1-3 Rotation Angle change

html

<span class="ech-grow-rotate-l">grow-rotate-l</span>
<span class="ech-grow-rotate-r">grow-rotate-r</span>
<span class="ech-rotate5">rotate5</span>
<span class="ech-rotate15">rotate15</span>
<span class="ech-rotate30">rotate30</span>
<span class="ech-rotate60">rotate60</span>
<span class="ech-rotate90">rotate90</span>
<span class="ech-rotate180">rotate180</span>
<span class="ech-rotate360">rotate360</span>
<span class="ech-rotate-5">rotate-5</span>
<span class="ech-rotate-15">rotate-15</span>
<span class="ech-rotate-30">rotate-30</span>
<span class="ech-rotate-60">rotate-60</span>
<span class="ech-rotate-90">rotate-90</span>
<span class="ech-rotate-180">rotate-180</span>
Copy the code

css

.ech-grow-rotate-l..ech-grow-rotate-r..ech-rotate5..ech-rotate15..ech-rotate30..ech-rotate60..ech-rotate90..ech-rotate180..ech-rotate360..ech-rotate-5..ech-rotate-15..ech-rotate-30..ech-rotate-60..ech-rotate-90..ech-rotate-180{
transition: all .4s;
}
.ech-grow-rotate-l:hover {
    transform: scale(1.1) rotate(4deg);
}
.ech-grow-rotate-r:hover {
    transform: scale(1.1) rotate(-4deg);
}
.ech-rotate-5:hover {
    transform: rotate(-5deg);
}
.ech-rotate-15:hover {
    transform: rotate(-15deg);
}

.ech-rotate-30:hover {
    transform: rotate(-30deg);
}

.ech-rotate-60:hover {
    transform: rotate(-60deg);
}

.ech-rotate-90:hover {
    transform: rotate(-90deg);
}

.ech-rotate-180:hover {
    transform: rotate(-180deg);
}
.ech-rotate5:hover {
    transform: rotate(5deg);
}
.ech-rotate15:hover {
    transform: rotate(15deg);
}

.ech-rotate30:hover {
    transform: rotate(30deg);
}

.ech-rotate60:hover {
    transform: rotate(60deg);
}

.ech-rotate90:hover {
    transform: rotate(90deg);
}

.ech-rotate180:hover {
    transform: rotate(180deg);
}

.ech-rotate360:hover {
    transform: rotate(360deg);
}Copy the code

2-1-4 Changes in displacement

html

<span class="ech-t">up</span>
<span class="ech-b">bottom</span>
<span class="ech-l">left</span>
<span class="ech-r">right</span>Copy the code

css

.ech-t..ech-bottom..ech-top..ech-right{
    transition: all .4s;
}
.ech-t:hover {
    transform: translate3d(0, -10px, 0);
}
.ech-b:hover {
    transform: translate3d(0, 10px, 0);
}
.ech-l:hover {
    transform: translate3d(-10px, 0, 0);
}
.ech-r:hover {
    transform: translate3d(10px, 0, 0);
}
Copy the code

2-1-5 Changes in frame

html

<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>Copy the code

css

.ech-border..ech-border-in{
    transition: all .4s;
}
.ech-border:hover {
    box-shadow: 0 0 0 4px #09f.0 0 1px transparent;
}

.ech-border-in:hover {
    box-shadow: inset 0 0 0 4px #09f.0 0 1px transparent;
}Copy the code

Changes in shadow of 2-1-6

(The GIF is so ugly, you can download it from Github.)

html

<span class="ech-shadow">shadow</span>
<span class="ech-shadow-in">shadow-in</span>
<span class="ech-shadow-write">shadow-write</span>
<span class="ech-shadow-big">shadow-big</span>Copy the code

css

.ech-shadow..ech-shadow-in..ech-shadow-write..ech-shadow-big{
    transition: all .4s;
}
.ech-shadow:hover {
    box-shadow: 0 0 10px # 333;
}   
.ech-shadow-in:hover {
    box-shadow: inset 0 0 10px # 333;
}
.ech-shadow-write:hover {
    box-shadow: inset 0 0 20px #fff;
}
.ech-shadow-big:hover {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}Copy the code

2-1-7 Changes in transparency

html

<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>Copy the code

css

.ech-fade-out..ech-fade-in{
    transition: all .4s;
}
.ech-fade-out:hover {
    opacity:.6;
}

.ech-fade-in {
    opacity:.5;
}

.ech-fade-in:hover {
    opacity: 1;
}    Copy the code

2-1-8 Rounded corners change

html

<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>Copy the code

css

.ech-radius..ech-rectangle{
    transition: all .4s;
}
.ech-radius {
    border-radius: 10px;
}

.ech-radius:hover {
    border-radius: 0;
}

.ech-rectangle:hover {
    border-radius: 10px;
}
Copy the code

2-2. Color animation effect

This part of the animation is mainly used :before and :after implementation, so if you use :before and :after are not occupied, otherwise it will display abnormal

2-2-1. Color block change

Because this is similar, I’m just going to say it all together, so be careful when you look at the code. See the code can not understand, directly download on Github, and then run the file, while debugging to see the effect! So it’s easy to understand!

html

<span class="ech-fade">fade</span>
<span class="ech-fade-t">fade-t</span>
<span class="ech-fade-b">fade-b</span>
<span class="ech-fade-l">fade-l</span>
<span class="ech-fade-r">fade-r</span>
<span class="ech-bounce-t">bounce-t</span>
<span class="ech-bounce-b">bounce-b</span>
<span class="ech-bounce-l">bounce-l</span>
<span class="ech-bounce-r">bounce-r</span>
<span class="ech-fade-c-out">fade-c-out</span>
<span class="ech-fade-c-in">fade-c-in</span>
<span class="ech-fade-m-out">fade-m-out</span>
<span class="ech-fade-m-in">fade-m-in</span>Copy the code

css

/* The current element is set relative */
.ech-fade..ech-fade-t..ech-fade-b..ech-fade-l..ech-fade-r..ech-fade-c-in..ech-fade-m-in..ech-fade-m-out..ech-fade-c-out..ech-bounce-t..ech-bounce-b..ech-bounce-r..ech-bounce-l {
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/* The :before and :after of the current element sets the absolute position */
.ech-fade:before..ech-fade-t:before..ech-fade-b:before..ech-fade-l:before..ech-fade-r:before..ech-fade-c-in:before..ech-fade-m-in:before..ech-fade-m-out:before..ech-fade-c-in:after..ech-fade-m-in:after..ech-fade-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}
/* Bounce elements :before and :after set absolute positioning and motion curves */
.ech-bounce-t:before..ech-bounce-b:before..ech-bounce-r:before..ech-bounce-l:before {
    transition: all .3s;
    transition-timing-function: cubic-bezier(0.52, 1.7, 0.5, 0.4);
    position: absolute;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    width: 100%;
    height: 100%;
}

/* Background color and text changes */
.ech-fade:before {
    top: 0;
    left: 0;
    transform: scaleX(1);
    opacity: 0;
}

.ech-fade:hover:before {
    opacity: 1;
}

/* Color changes from left to right */
.ech-fade-l:before..ech-bounce-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}
/* Color changes from right to left */
.ech-fade-r:before..ech-bounce-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/* Color changes from top to bottom */
.ech-fade-t:before..ech-bounce-t:before {
    bottom: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}
/* Color changes from bottom to top */
.ech-fade-b:before..ech-bounce-b:before {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}

/* Color vertical center out */
.ech-fade-m-out:before {
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleY(0);
}

/* horizontally centered out */
.ech-fade-c-out:before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    transform: scaleX(0);
}

.ech-fade-c-out:hover:before {
    transform: scaleX(1);
}

/* horizontal center in */
.ech-fade-c-in:before {
    top: 0;
    left: 0;
    transform-origin: 0 50%;
    transform: scaleX(0);
}

.ech-fade-c-in:after {
    top: 0;
    right: 0;
    transform-origin: 100% 50%;
    transform: scaleX(0);
}

/* Vertical center in */
.ech-fade-m-in:before {
    top: 0;
    left: 0;
    transform-origin: 50% 0;
    transform: scaleY(0);
}

.ech-fade-m-in:after {
    bottom: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform: scaleY(0);
}
/* Current element text color changes */
.ech-fade:hover..ech-fade-t:hover..ech-fade-b:hover..ech-fade-l:hover..ech-fade-r:hover..ech-fade-c-in:hover..ech-fade-m-in:hover..ech-fade-m-out:hover..ech-fade-c-out:hover..ech-bounce-t:hover..ech-bounce-b:hover..ech-bounce-r:hover..ech-bounce-l:hover {
    color: #fff;
}
/* Vertical input :before change (half) */
.ech-fade-m-in:hover:before..ech-fade-m-in:hover:after {
    transform: scaleY(. 51); }/* before change */
.ech-fade-t:hover:before..ech-fade-b:hover:before..ech-fade-m-out:hover:before..ech-bounce-b:hover:before..ech-bounce-t:hover:before {
    transform: scaleY(1);
}
/* Horizontal incoming :before change (half) */
.ech-fade-c-in:hover:before..ech-fade-c-in:hover:after {
    transform: scaleX(. 51); }/* horizontal input :before change */
.ech-fade-l:hover:before..ech-fade-r:hover:before..ech-fade-c-out:hover:before..ech-bounce-l:hover:before..ech-bounce-r:hover:before {
    transform: scaleX(1);
}    Copy the code

2-2-2. Color changes with up and down lines

This is also a big chunk of code and it’s probably a little bit messier to look at, so you have to be a little bit more careful when you look at the code. See the code can not understand, directly download on Github, and then run the file, while debugging to see the effect! So it’s easy to understand!

html

<span class="ech-overline-l">overline-l</span>
<span class="ech-overline-r">overline-r</span>
<span class="ech-underline-l">underline-l</span>
<span class="ech-underline-r">underline-r</span>
<span class="ech-underline-c">underline-c</span>
<span class="ech-underline-c-out">underline-c-out</span>
<span class="ech-overline-c">overline-c</span>
<span class="ech-overline-c-out">overline-c-out</span>Copy the code

css

/* The dash and underscore changes the current element style setting relative to the location */
.ech-overline-r..ech-overline-l..ech-underline-r..ech-underline-l..ech-underline-c..ech-overline-c..ech-underline-c-out..ech-overline-c-out{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/* Initialize :after:before size and absolute positioning */
.ech-overline-r:before..ech-overline-l:before..ech-underline-l:before..ech-underline-r:before..ech-underline-c:before..ech-overline-c:before..ech-underline-c:after..ech-overline-c:after..ech-underline-c-out:before..ech-overline-c-out:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    background: #09f;
    z-index: -1;
    height: 4px;
    width: 100%;
    transform: scaleX(0);
}

/* line left and right */
.ech-overline-r:before {
    top: 0;
    left: 0;
    transform-origin: 100% 50%;
}

.ech-overline-l:before {
    top: 0;
    right: 0;
    transform-origin: 0 50%;
}

/* Underline left and right */
.ech-underline-r:before {
    bottom: 0;
    left: 0;
    transform-origin: 100% 50%;

}

.ech-underline-l:before {
    bottom: 0;
    right: 0;
    transform-origin: 0% 50%;
}

/** * line underline in center **/
.ech-overline-c:before {
    top: 0;
    transform-origin: 0 50%;
}

.ech-overline-c:after {
    top: 0;
    transform-origin: 100% 50%;
}

.ech-underline-c:before {
    bottom: 0;
    transform-origin: 0 50%;
}

.ech-underline-c:after {
    bottom: 0;
    transform-origin: 100% 50%;
}

.ech-overline-c:before..ech-underline-c:before {
    left: 0;
}

.ech-overline-c:after..ech-underline-c:after {
    right: 0;
}

/* underline - center out */
.ech-overline-c-out:before {
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.ech-underline-c-out:before {
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
/ * * / hover effect
.ech-overline-c:hover:after..ech-overline-c:hover:before..ech-underline-c:hover:after..ech-underline-c:hover:before {
    transform: scaleX(. 51); }.ech-overline-l:hover:before..ech-overline-r:hover:before..ech-underline-l:hover:before..ech-underline-r:hover:before..ech-underline-c-out:hover:before..ech-overline-c-out:hover:before {
    transform: scaleX(1);
}
Copy the code

2-2-3 Arrow animation

html

<span class="ech-arrow-l">arrow-l</span>
<span class="ech-arrow-r">arrow-r</span>
<span class="ech-arrow-t">arrow-t</span>
<span class="ech-arrow-b">arrow-b</span>
<span class="ech-arrow-l-move">arrow-l</span>
<span class="ech-arrow-r-move">arrow-r</span>
<span class="ech-arrow-t-move">arrow-t</span>
<span class="ech-arrow-b-move">arrow-b</span>
Copy the code

css

.ech-arrow-l..ech-arrow-r..ech-arrow-t..ech-arrow-b..ech-arrow-l-move..ech-arrow-r-move..ech-arrow-t-move..ech-arrow-b-move{
    position: relative;
    transition: all .3s;
    z-index: 1;
}
/* Initialize the arrow style */
.ech-arrow-l:before..ech-arrow-r:before..ech-arrow-t:before..ech-arrow-b:before..ech-arrow-l-move:before..ech-arrow-r-move:before..ech-arrow-t-move:before..ech-arrow-b-move:before {
    position: absolute;
    transition: all .3s;
    content: "";
    display: block;
    z-index: -1;
    border-style: solid;
    margin: auto;
    width: 0;
    height: 0;
}

.ech-arrow-l:before..ech-arrow-l-move:before {
    left: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 10px 10px 0;
    border-color: transparent #ccc transparent transparent;
}

.ech-arrow-r:before..ech-arrow-r-move:before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #ccc;
}

.ech-arrow-t:before..ech-arrow-t-move:before {
    left: 0;
    top: 0;
    right: 0;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #ccc transparent;
}

.ech-arrow-b:before..ech-arrow-b-move:before {
    left: 0;
    bottom: 0;
    right: 0;
    border-width: 10px 10px 0 10px;
    border-color: #ccc transparent transparent transparent;
}

.ech-arrow-l-move..ech-arrow-r-move..ech-arrow-t-move..ech-arrow-b-move {
    transition: transform .3s;
}
/ * * / hover effect
.ech-arrow-l-move:hover {
    transform: translateX(10px);
}

.ech-arrow-r-move:hover {
    transform: translateX(-10px);
}

.ech-arrow-t-move:hover {
    transform: translateY(10px);
}

.ech-arrow-b-move:hover {
    transform: translateY(-10px);
}

.ech-arrow-l-move:hover:before..ech-arrow-l:hover:before {
    transform: translateX(-10px);
}

.ech-arrow-r-move:hover:before..ech-arrow-r:hover:before {
    transform: translateX(10px);
}

.ech-arrow-t-move:hover:before..ech-arrow-t:hover:before {
    transform: translateY(-10px);
}

.ech-arrow-b-move:hover:before..ech-arrow-b:hover:before {
    transform: translateY(10px);
}
Copy the code

2-3 More complex animations

2-1 and 2-2 content, are the use of transition to achieve the effect, so this piece is the use of animation to achieve the effect! The difference is that the writing method of hover is to add an animation, the encapsulation of animation, the difficulty lies in the creativity.

Flicker effect

html

<span class="ech-flash">flash</span>Copy the code

css

.ech-flash:hover {
    animation: flash .5s ease;
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1; Were 25% and 75%} {opacity: 0; }}Copy the code

2-3-2 Ringing effect of the alarm clock

html

<span class="ech-shake-time">shake-time</span>Copy the code

css

/* Echo alarm clock effect */
.ech-shake-time:hover {
    animation: shake-time 1s ease;
}

@keyframes shake-time {
    0% {
        transform: scale(1); Were 10% and 20%} {transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg); 100%} {transform: scale(1) rotate(0); }}Copy the code

2-3-3 swing effect

html

<span class="ech-wobble-c">wobble-c</span>
<span class="ech-wobble-t">wobble-t</span>
<span class="ech-wobble-b">wobble-b</span>Copy the code

css

.ech-wobble-t..ech-skew-r-t..ech-skew-l-t {
    transform-origin: 0 100%;
}

.ech-wobble-b..ech-skew-r-b..ech-skew-l-b {
    transform-origin: 100% 0;
}

.ech-wobble-c:hover..ech-wobble-t:hover..ech-wobble-b:hover {
    animation: wobble-x 1s ease-in-out;
}
@keyframes wobble-x {
    1665.% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg); 33}3.% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    4995.% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    666.% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    8325.% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg); 100%} {-webkit-transform: skew(0);
        transform: skew(0); }}Copy the code

Two-three-four rocking effect

html

<span class="ech-swing">swing</span>Copy the code

css

.ech-swing:hover {
    animation: swing .5s ease alternate;
}

@keyframes swing {
    20% {
        transform: rotate(15deg); 40%} {transform: rotate(-10deg); 60%} {transform: rotate(5deg); 80%} {transform: rotate(-5deg); 100%} {transform: rotate(0); }}Copy the code

2-3-5 jitter effect

html

<span class="ech-shake">shake</span>Copy the code

css

.ech-shake:hover {
    animation: shake .5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px); }}Copy the code

2-3-6 bounce effect

html

<span class="ech-bounce">bounce</span>Copy the code

css

.ech-bounce:hover {
    animation: bounce 1s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0); 40%} {transform: translateY(-30px); 60%} {transform: translateY(-15px); }}Copy the code

3. Preset animation

I don’t want to write two separate articles because of space constraints. About this preset animation, I will simply say, write, I directly give a general operation demo, and complete code! Anyway, the way to write this is relatively simple, just change a class name. It is difficult to write some animation, which requires creativity, we can refer to the Internet.

(I don’t know why, the GIF screenshot can not be put up, so I put a small one, we result in the following JPG together, is through the following button, show the animation, you can also download the code below github to see.)

(The full code is more, posted here, but I suggest you take a look at it, because it is confusing to just look at the code, to open the file in the browser, a look at the debugging side, it will be very simple, very easy to understand)

The HTML code

       
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="ec-css2.css">
    <style>
        .big {
            width: 500px;
            height: 500px;
            border: 1px solid #ccc;
            margin: 100px auto 0 auto;
        }

        #demo {
            width: 200px;
            height: 100px;
            margin: 200px auto;
            background: #09f;
        }

        .btn-box {
            margin: 0 auto 100px auto;
            max-width: 1200px;
            font-size: 0;
        }

        .btn-box a {
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: # 333;
            background: #ccc;
            margin: 0 0 10px 10px;
        }
        .btn-box .cur{
            background: #09f;
            color: #fff;
        }
        .an-type{
            width: 500px;
            height: 100px;
            margin: 0 auto;
        }
        .an-type a{
            font-size: 16px;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            padding: 0 6px;
            color: # 333;
            background: #ccc;
            margin: 0 10px 10px 0;
        }
        .an-type .cur{
            background: #09f;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="" id="demo"></div>
</div>
<div class="an-type">
    <a href="javascripr:;" data-class="ec-infinite" id="infinite">infinite</a>
    <a href="javascripr:;" data-class="ec-alternate" id="alternate">alternate</a>
    <a href="javascripr:;" id="stop">stop</a>
</div>
<div class="btn-box">
    <a href="javascripr:;" data-class="ec-bounce" class="an-a">bounce</a>
    <a href="javascripr:;" data-class="ec-bounce-in-b" class="an-a">bounce-in-b</a>
    <a href="javascripr:;" data-class="ec-bounce-in-l" class="an-a">bounce-in-l</a>
    <a href="javascripr:;" data-class="ec-bounce-in-t" class="an-a">bounce-in-t</a>
    <a href="javascripr:;" data-class="ec-bounce-in-r" class="an-a">bounce-in-r</a>
    <a href="javascripr:;" data-class="ec-bounce-out-b" class="an-a">bounce-out-b</a>
    <a href="javascripr:;" data-class="ec-bounce-out-l" class="an-a">bounce-out-l</a>
    <a href="javascripr:;" data-class="ec-bounce-out-t" class="an-a">bounce-out-t</a>
    <a href="javascripr:;" data-class="ec-bounce-out-r" class="an-a">bounce-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-wobble" class="an-a">wobble</a>
    <a href="javascripr:;" data-class="ec-wobble-t" class="an-a">wobble-t</a>
    <a href="javascripr:;" data-class="ec-wobble-b" class="an-a">wobble-b</a>
    <br/>
    <a href="javascripr:;" data-class="ec-fade-in" class="an-a">fade-in</a>
    <a href="javascripr:;" data-class="ec-fade-in-t" class="an-a">fade-in-t</a>
    <a href="javascripr:;" data-class="ec-fade-in-b" class="an-a">fade-in-b</a>
    <a href="javascripr:;" data-class="ec-fade-in-l" class="an-a">fade-in-l</a>
    <a href="javascripr:;" data-class="ec-fade-in-r" class="an-a">fade-in-r</a>
    <a href="javascripr:;" data-class="ec-fade-out" class="an-a">fade-out</a>
    <a href="javascripr:;" data-class="ec-fade-out-t" class="an-a">fade-out-t</a>
    <a href="javascripr:;" data-class="ec-fade-out-b" class="an-a">fade-out-b</a>
    <a href="javascripr:;" data-class="ec-fade-out-l" class="an-a">fade-out-l</a>
    <a href="javascripr:;" data-class="ec-fade-out-r" class="an-a">fade-out-r</a>
    <br/>
    <a href="javascripr:;" data-class="ec-rotate-in" class="an-a">rotate-in</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rb" class="an-a">rotate-in-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-rt" class="an-a">rotate-in-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lb" class="an-a">rotate-in-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-in-lt" class="an-a">rotate-in-lt</a>
    <a href="javascripr:;" data-class="ec-rotate-out" class="an-a">rotate-out</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rb" class="an-a">rotate-out-rb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-rt" class="an-a">rotate-out-rt</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lb" class="an-a">rotate-out-lb</a>
    <a href="javascripr:;" data-class="ec-rotate-out-lt" class="an-a">rotate-out-lt</a>
    <br/>
    <a href="javascripr:;" data-class="ec-flip-in-x" class="an-a">flip-in-x</a>
    <a href="javascripr:;" data-class="ec-flip-in-y" class="an-a">flip-in-y</a>
    <a href="javascripr:;" data-class="ec-flip-out-x" class="an-a">flip-out-x</a>
    <a href="javascripr:;" data-class="ec-flip-out-y" class="an-a">flip-out-y</a>
    <br/>
    <a href="javascripr:;" data-class="ec-light-speed-in" class="an-a">light-speed-in</a>
    <a href="javascripr:;" data-class="ec-light-speed-out" class="an-a">light-speed-out</a>
    <br/>
    <a href="javascripr:;" data-class="ec-shake-time" class="an-a">shake-time</a>
    <a href="javascripr:;" data-class="ec-flash" class="an-a">flash</a>
    <a href="javascripr:;" data-class="ec-rubber-band" class="an-a">rubber-band</a>
    <a href="javascripr:;" data-class="ec-rubber-band-fast" class="an-a">rubber-band-fast</a>
    <a href="javascripr:;" data-class="ec-swing" class="an-a">swing</a>
    <a href="javascripr:;" data-class="ec-shake" class="an-a">shake</a>
    <a href="javascripr:;" data-class="ec-pulse-shrink" class="an-a">pulse-shrink</a>
    <a href="javascripr:;" data-class="ec-pulse" class="an-a">pulse</a>
</div>
</body>
<script src="ec-do.js"></script>
<script type="text/javascript">
    window.onload = function () {
        var oDivDemo = document.getElementById("demo"),
        oDivBox = document.getElementsByClassName("btn-box") [0],
        oAan=oDivBox.getElementsByTagName("a"),
        oInfinite=document.getElementById("infinite"),_infinite=false,
        oAlternate=document.getElementById("alternate"),_alternate=false,
        oStop=document.getElementById("stop");
        oStop.addEventListener("click".function(){
            oDivDemo.className="";
            _infinite=false;
            _alternate=false;
            ecDo.removeClass(oInfinite,"cur");
            ecDo.removeClass(oAlternate,"cur");
            ecDo.removeClass(oAan,"cur");
        })
        oInfinite.addEventListener("click".function(){ _infinite=! _infinite;if(_infinite){
                ecDo.addClass(oInfinite,"cur")
                ecDo.addClass(oDivDemo,"ec-infinite");
            }
            else{
                ecDo.removeClass(oInfinite,"cur")
                ecDo.removeClass(oDivDemo,"ec-infinite");
            }
        })
        oAlternate.addEventListener("click".function(){ _alternate=! _alternate;if(_alternate){
                ecDo.addClass(oAlternate,"cur")
                ecDo.addClass(oDivDemo,"ec-alternate");
            }
            else{
                ecDo.removeClass(oAlternate,"cur")
                ecDo.removeClass(oDivDemo,"ec-alternate");
            }
        })
        oDivBox.addEventListener("click".function (e) {
            var e = e || window.event;
            var target = e.target || e.srcElement, _class = "";
            if (target.nodeName.toLowerCase() === 'a') {
                ecDo.addClass(target,"cur");
                ecDo.removeClass(ecDo.siblings(target,"a"),"cur")
                _class =target.getAttribute("data-class");
                oDivDemo.className = "";
                setTimeout(function () {
                    ecDo.addClass(oDivDemo,_class);
                    if(_infinite){
                        ecDo.addClass(oDivDemo,"ec-infinite");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-infinite");
                    }
                    if(_alternate){
                        ecDo.addClass(oDivDemo,"ec-alternate");
                    }
                    else{
                        ecDo.removeClass(oDivDemo,"ec-alternate"); }},50)}}}</script>
</html>Copy the code

css

/*动画效果*/
.ec-bounce-in-l {
    animation: bounce-in-l 1s ease;
}
@keyframes bounce-in-l {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0)
    }
    75% {
        transform: translate3d(-10px, 0, 0)
    }
    90% {
        transform: translate3d(5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-r {
    animation: bounce-in-r 1s ease;
}
@keyframes bounce-in-r {
    0%, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    0% {
        opacity: 0;
        transform: translate3d(3000px, 0, 0)
    }
    60% {
        opacity: 1;
        transform: translate3d(-25px, 0, 0)
    }
    75% {
        transform: translate3d(10px, 0, 0)
    }
    90% {
        transform: translate3d(-5px, 0, 0)
    }
    to {
        -webkit-transform: none;
        transform: none
    }
}
.ec-bounce-in-b{
    animation: bounce-in-b 1s;
}
.ec-bounce-in-t{
    animation: bounce-in-t 1s;
}
@keyframes bounce-in-t {
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, -3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, 25px, 0);
    }

    75% {
        transform: translate3d(0, -10px, 0);
    }

    90% {
        transform: translate3d(0, 5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-in-b{
    from, 60%, 75%, 90%, to {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
        opacity: 0;
        transform: translate3d(0, 3000px, 0);
    }

    60% {
        opacity: 1;
        transform: translate3d(0, -25px, 0);
    }

    75% {
        transform: translate3d(0, 10px, 0);
    }

    90% {
        transform: translate3d(0, -5px, 0);
    }

    to {
        transform: none;
    }
}
@keyframes bounce-out-b {
    20% {
        transform: translate3d(0, 10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, -20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, 2000px, 0);
    }
}

.ec-bounce-out-b {
    animation: bounce-out-b 1s;
}

@keyframes bounce-out-l {
    20% {
        opacity: 1;
        transform: translate3d(20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(-2000px, 0, 0);
    }
}

.ec-bounce-out-l {
    animation: bounce-out-l 1s;
}

@keyframes bounce-out-r {
    20% {
        opacity: 1;
        transform: translate3d(-20px, 0, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(2000px, 0, 0);
    }
}

.ec-bounce-out-r {
    animation: bounce-out-r 1s;
}

@keyframes bounce-out-t {
    20% {
        transform: translate3d(0, -10px, 0);
    }

    40%, 45% {
        opacity: 1;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 0;
        transform: translate3d(0, -2000px, 0);
    }
}

.ec-bounce-out-t {
    animation: bounce-out-t 1s;
}

/*心跳效果*/
.ec-pulse {
    animation: pulse 1s linear;
}
.ec-pulse-shrink {
    animation: pulse .5s linear;
}
@keyframes pulse {
    25% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(0.9);
    }
}
.ec-flash {
    animation: flash .5s ease;
}
/*摇摆*/
.ec-swing {
    animation: swing .5s ease;
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0);
    }
}
/*摇摆*/
.ec-wobble-t{
    transform-origin: 0 100%;
}

.ec-wobble-b{
    transform-origin: 100% 0;
}

.ec-wobble,.ec-wobble-t,.ec-wobble-b {
    animation: wobblex 1s ease-in-out;
}

@keyframes wobblex {
    16.65% {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }
    33.3% {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }
    49.95% {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }
    66.6% {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }
    83.25% {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }
    100% {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}
/*闪烁*/
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.ec-rubber-band {
    animation: rubber-band 1s;
}
.ec-rubber-band-fast {
    animation: rubber-band .5s;
}
@keyframes rubber-band {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, .95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}
/*仿闹钟振铃效果*/
.ec-shake-time{
    animation: shake-time 1s ease;
}

@keyframes shake-time {
    0% {
        transform: scale(1);
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg);
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg);
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

/*弹跳变化*/
.ec-bounce{
    animation: bounce 1s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/*震动*/
.ec-shake {
    animation: shake .5s ease;
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
/*透明度进入*/
@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ec-fade-in {
    animation: fade-in 1s;
}

@keyframes ec-fade-in-b {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-b {
    animation: ec-fade-in-b 1s;
}

@keyframes ec-fade-in-l {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-l {
    animation: ec-fade-in-l 1s;
}

@keyframes ec-fade-in-r {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-r {
    animation: ec-fade-in-r 1s;
}

@keyframes ec-fade-in-t {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ec-fade-in-t {
    animation: ec-fade-in-t 1s;
}

@keyframes ec-fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.ec-fade-out {
    animation: ec-fade-out 1s;
}

@keyframes ec-fade-out-b {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

.ec-fade-out-b {
    animation: ec-fade-out-b 1s;
}

@keyframes ec-fade-out-l {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

.ec-fade-out-l {
    animation: ec-fade-out-l 1s;
}


@keyframes ec-fade-out-r {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

.ec-fade-out-r {
    animation: ec-fade-out-r 1s;
}

@keyframes ec-fade-out-t {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.ec-fade-out-t {
    animation: ec-fade-out-t 1s;
}
/*旋转进出*/
@keyframes rotate-in{
    0%{opacity:0;transform:rotate(-200deg);}
    100%{opacity:1;transform:rotate(0);}
}
.ec-rotate-in {
    animation: rotate-in 1s;
}
@keyframes rotate-in-lt{
    0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lt {
    animation: rotate-in-lt 1s;
}
@keyframes rotate-in-lb{
    0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-lb {
    animation: rotate-in-lb 1s;
}
@keyframes rotate-in-rt{
    0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rt {
    animation: rotate-in-rt 1s;
}
@keyframes rotate-in-rb{
    0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
    100%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
}
.ec-rotate-in-rb {
    animation: rotate-in-rb 1s;
}

.ec-rotate-out {
    animation: rotate-out 1s;
}
@keyframes rotate-out{
    0%{transform-origin:center center;transform:rotate(0);opacity:1;}
    100%{transform-origin:center center;transform:rotate(200deg);opacity:0;}
}
.ec-rotate-out-lt {
    animation: rotate-out-lt 1s;
}
@keyframes rotate-out-lt{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0;}
}
.ec-rotate-out-lb {
    animation: rotate-out-lb 1s;
}
@keyframes rotate-out-lb{
    0%{transform-origin:left bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rt {
    animation: rotate-out-rt 1s;
}
@keyframes rotate-out-rt{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0;}
}
.ec-rotate-out-rb {
    animation: rotate-out-rb 1s;
}
@keyframes rotate-out-rb{
    0%{transform-origin:right bottom;transform:rotate(0);opacity:1;}
    100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0;}
}
/*翻转进出*/
@keyframes flip-in-x {
    from {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-x {
    animation: flip-in-x 1s;
}

@keyframes flip-in-y {
    from {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        animation-timing-function: ease-in;
        opacity: 0;
    }

    40% {
        transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
        animation-timing-function: ease-in;
    }

    60% {
        transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    }

    to {
        transform: perspective(400px);
    }
}

.ec-flip-in-y {
    animation: flip-in-y 1s;
}

@keyframes flip-out-x {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-x {
    animation: flip-out-x 1s;
}

@keyframes flip-out-y {
    from {
        transform: perspective(400px);
    }

    30% {
        transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
        opacity: 1;
    }

    to {
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        opacity: 0;
    }
}

.ec-flip-out-y {
    animation: flip-out-y 1s;
}

@keyframes light-speed-in {
    from {
        transform: translate3d(100%, 0, 0) skewX(-30deg);
        opacity: 0;
    }

    60% {
        transform: skewX(20deg);
        opacity: 1;
    }

    80% {
        transform: skewX(-5deg);
        opacity: 1;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

.ec-light-speed-in {
    animation: light-speed-in 1s ease-out;
}

@keyframes light-speed-out {
    from {
        opacity: 1;
    }

    to {
        transform: translate3d(100%, 0, 0) skewX(30deg);
        opacity: 0;
    }
}

.ec-light-speed-out {
    animation: light-speed-out ease-in 1s;
}
/*无限次数执行动画*/
.ec-infinite{
    animation-iteration-count: infinite;
}

.ec-alternate {
    animation-direction: alternate;
}Copy the code

4. Explore the unknown

Well, finished hover animation and preset animation, I developed, found such a number of fun things, I am ready to continue to study, also suggest you play, maybe one day to make great things! Chestnuts below!

The following animation, not only hover animation and preset animation, we pay attention to

4-1. Perform animation indefinitely

A normal animation, with infinite execution, will usually have very friendly effects,

But sometimes the effect is not satisfactory

4-2. Reverse animation

On a 4-1 basis, plus the direction to perform the animation, will also have a different effect

No reverse animation

Add a reverse animation effect

4-3. Combination effect

A combination of shadow effects and other effects.

Chestnuts on the top

The CSS code is the same, the difference is the HTML code, add some class names

The above several chestnuts I found in the development, this I will continue to study, also hope you can study, study what fun effect, or animation writing, welcome to share!

5. Chicken rib selection

When writing the CSS3 codebase, I also found that encapsulating CSS3 a weak spot.

1. The effect of CSS3 is too flexible and diverse, and the packaging is very easy to be difficult to adjust to the situation, and the effect of each project may appear similar, but is not the same, that is to say, the encapsulated library is not suitable for the project.

2. Another point is that the CSS3 effect is basically every project is useful, and is commonly used, but the usual project to use the CSS3 effect is up to 10, and it is not difficult, handwriting can be realized quickly, there is no need to introduce a plug-in or library.

But IN the end I stuck with it, and here’s why

1. If the requirements for animation effects will not be very strict in project development, I can totally introduce one more file to increase my development efficiency. The compressed file may only be about 10K, which is acceptable.

2. Even if it is not used in the project, I can also take it as a role of practice and learning. If a project needs an animation in the future, EVEN if the animation is different from what I encapsulated, I can watch and change it.

3. Even if I didn’t use this library when I was developing, in case there are some animations I wrote and forgot how to write, I can go back and see how to implement them!

4. If you don’t know what effect to put when developing, this library can also play a certain reference role!

5. Now write more, maybe play a role of divergent thinking, write these effects, think of other effects how to write, or think of what effects can be written, this is also a very good result and harvest!

6. Summary

Well, cSS3 code base package is almost here, if you can read the whole article, you are already a warrior, prove that you are very patient, read immediately master, this is not a problem for everyone, after all, not what strong logic code. I want the effect although all achieved, but later certainly also want to modify perfect (at least look at the source, I see a bit messy, but I don’t know if the arrangement between the first put up). In other words, through the above cases, I hope to help you, the ideal is to play the role of divergent thinking, is through my case, can let you know how to do some other animation, or think of what good animation effect. Web front end this line, the most important is to practice, in addition to reading other people’s projects, blogs, we must practice, write more, so that progress will be faster, knowledge will remember more firmly. Finally, if you think there is something wrong or wrong in my writing, please point it out. Have any good idea, at any time to give you valuable advice to me! I also put the project on Github! There is a need to go to see, star under EC-CSS!