1. Introduction
At the beginning of the month, the CSS3 warm-up combat – transition and animation (achieve cool pull down, accordion, seamless scrolling). The js code base has also been published twice, two articles. Before also wrote cSS3 warm up combat, now that the warm up finished, it is time to begin to encapsulate CSS3 code base, compared to the JS code base, CSS3 code base logic is more simple! It can be said that as long as the annotation and a renderings can let you understand the principle of it! When I wrote the code base, I mainly referenced three open source projects, NEC, hover. CSS, and animate. CSS. Source code has been put on Github, you can go to see, also welcome to star! Ec – CSS.
By pointing out these three libraries, I’m not telling you to take someone else’s code, modify it a little bit, or copy it to your own project and call it your own. I let everyone to see other people’s code, learn other people’s way to achieve, and then use their own way to achieve, of course, if the other people’s project, add, delete, change and check to the point of unrecognizable, this I personally think can be said to be their own project! Emphasize one point, do not directly copy other people’s code, put it on your own project, and then say that their own development, this is not respect others’ results, to their own technical level to improve the help is less. I write articles, although will also give the code, but my purpose is to provide you reference, hope to let you 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.
Another is, if your article or project reference, reference, reference which project code, it is best to quote the project to explain.
The statement
1. You’ll see many below
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 code2. For class naming, 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
The article is long, but said that is two points, we should see also will soon 1. Write some hover animation and preset animation running effect, and posted the code 2. Find several animation combinations, and add infinite animation, reverse animation, will have different effects, and continue to study, see if you can study different things!
2. Hover animation
With that said, it’s time to get into the text,
The first is the hover animation, about this concept, I explain, is the mouse moved to trigger the animation, is triggered the hover event of the mouse can see the animation! Below, according to type, write one by one!
2-1. Simple animation
Change in magnitude of 2-1-1
html
<span class="ech-big">big</span>
<span class="ech-small">small</span>Copy the codecss
.ech-big,.ech-small { transition: all .4s; }. Ech - big: hover {transform: scale (1.2); } .ech-small:hover{ transform: scale(.9); }Copy the code2-1-2 Shape change
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 codecss
.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-r-t, .ech-skew-l-t {
transform-origin: 0 100%;
}
.ech-skew-r-b, .ech-skew-l-b {
transform-origin: 100% 0;
}
.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);
}
.ech-skew-r-b:hover {
transform: skew(-15deg);
}
Copy the codeChange of rotation Angle of 2-1-3
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 codecss
.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 codeDisplacement change of 2-1-4
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 codecss
.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 codeChange in border of 2-1-5
html
<span class="ech-border">border</span>
<span class="ech-border-in">border-in</span>Copy the codecss
.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 codeShadow change
(The GIF is so ugly, you can download it on 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 codecss
.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 10pg-10px rgba(0, 0, 0, 0.5); The transform: scale (1.1); }Copy the code2-1-7 Transparency change
html
<span class="ech-fade-out">fade-out</span>
<span class="ech-fade-in">fade-in</span>Copy the codecss
.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 code2-1-8 Fillet change
html
<span class="ech-rectangle">rectangle</span>
<span class="ech-radius">radius</span>Copy the codecss
.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 code2-2. Color animation effects
This part of the animation is mainly used :before and :after to achieve, so, if you use, remember :before and :after is not occupied, otherwise it will show abnormal
2-2-1. Color block change
Because it’s very similar, I’m just going to say it in big chunks, so you have to be careful when you look at the code. If you don’t understand the code, download it directly on Github, then run the file, and see the effect while debugging! 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 codecss
*/.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; } /* Set absolute positioning for the current element :before and :after */.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: Cubic bezier(0.52, 1.7, 0.5, 0.4); position: absolute; content:"";
display: block;
background: #09f;z-index: -1; width: 100%; height: 100%; } / /.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); } /* The color changes from right to left */.ech-fadec-r :before,.ech-bounce-r:before {top: 0; left: 0; transform-origin: 100% 50%; transform: scaleX(0); } /* Change the color from top to bottom */.ech-fad-t :before,.ech-bound-t :before {bottom: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } /* Change the color from bottom to top */.ech-fad-b :before,.ech-bounce-b:before {top: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /* Ech-fade :before {top: 0; bottom: 0; left: 0; margin: auto; transform: scaleY(0); } /* Ech-fade :before {top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: scaleX(0); } .ech-fade-c-out:hover:before { transform: scaleX(1); } / /.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); } / /.ech-fad-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); } /*.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;} /*.ech-fad-m-in :hover:before,.ech-fad-m-in :hover:after {transform: scaleY(.51); } / * in vertical direction: 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); }.ech-fade :hover:before,.ech-fade :hover:before,.ech-fade :hover:after {transform: scaleX(.51); } /* Horizontal coming in :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 code2-2-2. Color change with the underscore
This is also a big chunk of code, but it can get messy, so you have to be careful when you’re looking at code. If you don’t understand the code, download it directly on Github, then run the file, and see the effect while debugging! 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 codecss
*/.ech-overline-r,.ech-overline. */.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); } / /.ech-overline-r:before {top: 0; left: 0; transform-origin: 100% 50%; } .ech-overline-l:before { top: 0; right: 0; transform-origin: 0 50%; } / /.ech-underline-r:before {bottom: 0; left: 0; transform-origin: 100% 50%; } .ech-underline-l:before { bottom: 0; right: 0; transform-origin: 0% 50%; **/.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; } / /.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 code2-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 codecss
.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 code2-3 more complex animations
For both 2-1 and 2-2, the transition is used to achieve the effect, so this one uses animation to achieve the effect! The difference is hover’s writing method is to add an animation, animation encapsulation, difficulty lies in creativity.
2-3-1 flicker effect
html
<span class="ech-flash">flash</span>Copy the codecss
.ech-flash:hover { animation: flash .5s ease; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; }}Copy the code2-3-2 Alarm ring effect
html
<span class="ech-shake-time">shake-time</span>Copy the codecss
/*.ech-shake-time:hover {animation: shake-time 1s ease; /*.ech-shake-time:hover {animation: shake-time 1s ease; } @keyframes shake-time { 0% { transform: scale(1); {transform: scale(0.9) rotate(-3deg); {transform: scale(1.1) rotate(3deg); {transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }}Copy the code2-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 codecss
.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 {16.65% {-webkit-transform: skew(-12deg); transform: skew(-12deg); {-webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg); {-webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); }}Copy the codeTwo-three-four shaking effect
html
<span class="ech-swing">swing</span>Copy the codecss
.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 code2-3-5 shake effect
html
<span class="ech-shake">shake</span>Copy the codecss
.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 code2-3-6 bounce effect
html
<span class="ech-bounce">bounce</span>Copy the codecss
.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 code3. Preset animation
Limited by the length of the article, I do not want to write two separate articles. About this preset animation, I will simply say, write, I directly give a general operation demonstration, and complete code! Anyway, the way to write this is relatively simple, it’s just changing a class name. Difficult is the animation of some of the preparation, this need creativity, we can refer to the Internet.
(The complete code is more, posted here, but it is recommended that you take a look at it, after a while, because this only look at the code is meng, to open the file in the browser, a look at the debugging side to see, this will be very simple, very easy to understand)
The HTML code
<! DOCTYPE html> <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 codecss
/* Animation effects */.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 - the 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 - the 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-l1s; } @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; } /* swing */.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); }} /* wobble */.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); {-webkit-transform: skew(10deg); transform: skew(10deg); } 49.95% {-webkit-transform: skew(-6deg); transform: skew(-6deg); {-webkit-transform: skew(4deg); transform: skew(4deg); } 83.25% {-webkit-transform: skew(-2deg); transform: skew(-2deg); } 100% { -webkit-transform: skew(0); transform: skew(0); Opacity: 0; opacity: 0; opacity: 0; opacity: 0; } 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); {transform: scale3d(.95, 1.05, 1); } transform: scale3d(1.05,.95, 1); } to { transform: scale3d(1, 1, 1); {animation: shake-time 1s ease;}} /* ease */. Ec -shake-time{animation: shake-time 1s ease; } @keyframes shake-time { 0% { transform: scale(1); {transform: scale(0.9) rotate(-3deg); {transform: scale(1.1) rotate(3deg); {transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }} /* bounce change */.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 fad-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-l1s; } @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-lt1s; } @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; } /* Execute the animation an infinite number of times */. Ec -infinite{animation-iteration-count: infinite; } .ec-alternate { animation-direction: alternate; }Copy the code4. Explore the unknown
Well, said hover animation and preset animation, WHEN I developed, found such a number of fun things, I am ready to continue to study, also suggest that you play, who knows what day made great things! Chestnuts below!
The following animation, not hover animation and preset animation, everyone notice
4-1. Execute animations indefinitely
A normal animation, with infinite execution, usually produces a very friendly effect,
But sometimes it doesn’t work as well as it should
4-2. Reverse animation
In addition to the 4-1, the direction of the animation will also have a different effect
No reverse animation
Add reverse animation
4-3. Combination effect
A combination of shadow effects and other effects.
The chestnuts on the top
The CSS code remains the same, the difference is the HTML code, with some extra class names
The above several are I found in the development of chestnuts, this I will continue to study, also hope that you can study, study out what fun effect, or animation writing method, welcome to share!
5. Chicken rib option
While writing the CSS3 codebase, I also found a problem with encapsulating CSS3.
1. The effects of CSS3 are too flexible and diverse, and the encapsulation is very easy to be difficult to suit, and the effect of each project may be the same, but not the same, which means that the encapsulated library is not suitable for the project.
2. Another point is that cSS3 effect is basically every project is useful, and is commonly used, but the most common project to use CSS3 effect is 10, and it is not difficult, handwriting can be achieved 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 in project development are not very strict, I can use 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 practice and learning. If a future project needs to animate, EVEN if the animation isn’t the same as the one I encapsulated, I can still look at it and make changes.
3. Even if I didn’t use this library during development, I can go back and see how to implement it if I have written some animations and forgot how to write them!
4 if the development, do not know what effect is good, this library, also can play a certain reference role!
5. Now write more, maybe play a divergent thinking role, write these effects, think of some 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 encapsulation to almost here, if you can see a complete article, you have been a warrior, prove that you are very patient, read immediately master, this is not a problem for everyone, after all, is not a strong logical code. Although I want to achieve the effect, but later is certainly to modify perfect (at least look at the source code, I see a little messy, but for a while and don’t know if the sorting, put up first). In other words, through the above cases, I hope to help you, the ideal is to play a divergent thinking role, is through my case, can let you know how to do some other animation, or think of what good animation effect. In this line of web front end, the most important thing is to practice more. In addition to reading other people’s projects and blogs, we must practice more and write more, so that progress will be faster and knowledge will be remembered more firmly. And finally, if you think I did something wrong or wrong, feel free to point it out. Have any good idea, at any time to give you valuable advice me! I also put the project on Github! There is a need to see, star under EC-CSS!
— — — — — — — — — — — — — — — — — — — — — — — — — gorgeous line — — — — — — — — — — — — — — — — — — — — want to know more, pay attention to focus on my WeChat public number: waiting for book cabinet
