Original link:Juejin. Cn/post / 684490…
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 you to look at other people’s code, learn from other people’s implementation methods, and then use their own way to implement, of course, if you add, delete, change and check other people’s projects to the point of recognition, this I personally feel can be said to be my 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.
Another is that if your article or project reference, reference, reference to which project code, it is best to cite the project to explain.
The statement
1. You’ll see a lot of them 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 codeL 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 codecss
.ech-big,.ech-small { transition: all .4s; }. Ech - big: hover {transform: scale (1.2); } .ech-small:hover{ transform: scale(.9); }Copy the code2 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 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 code2-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 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-lHover {transform: scale(1.1) rotate(4deg); 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 code2-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 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 code2-1-5 Changes in frame
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 codeChanges 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 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 10px-10px rgba(0, 0, 0, 0.5); The transform: scale (1.1); }Copy the code2-1-7 Changes in transparency
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 Rounded corners 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 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 codecss
/* Ech-fade,.ech-fade,.ech-fade,.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; Ech-fade :before,.ech-fade:before,.ech-fade:before,.ech-fade:before,.ech-fade:before,.ech-fade: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%; } /* Ech-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 change */. 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 :before,. Ech-bounce :before {top: 0; left: 0; transform-origin: 100% 50%; transform: scaleX(0); } /* The color changes from top to bottom */.ech-fade :before,.ech-bounce :before {bottom: 0; left: 0; transform-origin: 50% 0; transform: scaleY(0); } /* Color changes from bottom to top */. Ech-fade :before,. Ech-bounce -b:before {top: 0; left: 0; transform-origin: 50% 100%; transform: scaleY(0); } /* ece-fade :before {top: 0; bottom: 0; left: 0; margin: auto; transform: scaleY(0); } /* ece-fade :before {top: 0;} /* ece-fade :before {top: 0; right: 0; bottom: 0; left: 0; margin: auto; transform: scaleX(0); } .ech-fade-c-out:hover:before { transform: scaleX(1); } /* ece-fade :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); } /* ece-fade :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:hover,.ech-fade:hover,.ech-fade:hover,.ech-fade: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;} /* ece-fade :hover:before,.ece-fade :hover:after {transform: scaleY(.51); } /* ech-fade :hover:before,.ech-fade :hover:before,.ech-fade :hover:before,.ech-fade: fade :before,.ech-fade :hover:before, .ech-bounce-b:hover:before, .ech-bounce-t:hover:before { transform: scaleY(1); } /* ece-fade :hover:before,.ece-fade :hover:after {transform: scaleX(.51); } /* Horizontal 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 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 codecss
/* Overline and underline change the current element style setting relative positioning */.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); } */. Ech-overline-r :before {top: 0; left: 0; transform-origin: 100% 50%; } .ech-overline-l:before { top: 0; right: 0; transform-origin: 0 50%; } / / ecr-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; } /* Initializes 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
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 codecss
.ech-flash:hover { animation: flash .5s ease; } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; }}Copy the code2-3-2 Ringing effect of the alarm clock
html
<span class="ech-shake-time">shake-time</span>Copy the codecss
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); 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); } -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); }}Copy the codeTwo-three-four rocking 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 jitter 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
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.
(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
<! 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 */. 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; } /* Pulse effect */. 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); } -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); Opacity: 1; opacity: 1; opacity: 1; 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); 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 (.95, 1.05, 1); Transform: scale3D (1.05,.95, 1); 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); Transform: scale(0.9) rotate(-3deg); Transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg); Transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); }} /* bounce changes */. Ec -bounce{animation: bounce 1s ease; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); }} /* shake */. 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); Opacity: 0; opacity: 0; opacity: 0; 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; Opacity :0; opacity:0; opacity: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; }} / / @frames 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, 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!
Link: https://juejin.cn/post/6844903519359598599
Source: Nuggets
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please indicate the source.