展开全部
给你一62616964757a686964616fe78988e69d8331333365653761个例子：html>
css动画
*,*:before,*:after{
box-sizing:border-box;
margin:0;
padding:0;
}
:root,html,body{
font-family:'PoiretOne','OpenSans','HelveticaNeue','Helvetica','Arial',sans-serif;
background:#222;
color:white;
}
h1{
text-align:center;
margin:1remauto2rem;
font-weight:normal;
}
p{
margin:1rem;
}
.row{
width:80%;
height:150px;
margin:2remauto;
}
.cell{
display:inline-block;
width:49%;
text-align:center;
}
.circle{
display:inline-block;
width:100px;
height:100px;
border-radius:50%;
background:whiteSmoke;
box-shadow:4px-40px60px5pxrgb(26,117,206)inset;
}
.square{
display:inline-block;
width:100px;
height:100px;
border-radius:20px;
background:whiteSmoke;
box-shadow:4px-40px60px5pxrgb(26,117,206)inset;
}
.loader{
background:linear-gradient(toright,rgb(22,113,202)50%,transparent50%);
animation:spin1sinfinitelinear;
}
.loader:before{
display:block;
content:'';
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:90px;
height:90px;
background:#222;
border-radius:50%;
}
.gelatine{
animation:gelatine0.5sinfinite;
}
@keyframesgelatine{
from,to{transform:scale(1,1);}
25%{transform:scale(0.9,1.1);}
50%{transform:scale(1.1,0.9);}
75%{transform:scale(0.95,1.05);}
}
.spin{
animation:spin1sinfinitelinear;
}
@keyframesspin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
.elastic-spin{
animation:elastic-spin1sinfiniteease;
}
@keyframeselastic-spin{
from{transform:rotate(0deg);}
to{transform:rotate(720deg);}
}
.pulse{
animation:pulse1sinfiniteease-in-outalternate;
}
@keyframespulse{
from{transform:scale(0.8);}
to{transform:scale(1.2);}
}
.flash{
animation:flash500mseaseinfinitealternate;
}
@keyframesflash{
from{opacity:1;}
to{opacity:0;}
}
.hithere{
animation:hithere1seaseinfinite;
}
@keyframeshithere{
30%{transform:scale(1.2);}
40%,60%{transform:rotate(-20deg)scale(1.2);}
50%{transform:rotate(20deg)scale(1.2);}
70%{transform:rotate(0deg)scale(1.2);}
100%{transform:scale(1);}
}
.grow{
animation:grow2seaseinfinite;
}
@keyframesgrow{
from{transform:scale(0);}
to{transform:scale(1);}
}
.fade-in{
animation:fade-in2slinearinfinite;
}
@keyframesfade-in{
from{opacity:0;}
to{opacity:1;}
}
.fade-out{
animation:fade-out2slinearinfinite;
}
@keyframesfade-out{
from{opacity:1;}
to{opacity:0;}
}
.bounce{
animation:bounce2seaseinfinite;
}
@keyframesbounce{
70%{transform:translateY(0%);}
80%{transform:translateY(-15%);}
90%{transform:translateY(0%);}
95%{transform:translateY(-7%);}
97%{transform:translateY(0%);}
99%{transform:translateY(-3%);}
100%{transform:translateY(0);}
}
.bounce2{
animation:bounce22seaseinfinite;
}
@keyframesbounce2{
0%,20%,50%,80%,100%{transform:translateY(0);}
40%{transform:translateY(-30px);}
60%{transform:translateY(-15px);}
}
.shake{
animation:shake2seaseinfinite;
}
@keyframesshake{
0%,100%{transform:translateX(0);}
10%,30%,50%,70%,90%{transform:translateX(-10px);}
20%,40%,60%,80%{transform:translateX(10px);}
}
.flip{
backface-visibility:visible!important;
animation:flip2seaseinfinite;
}
@keyframesflip{
0%{
transform:perspective(400px)rotateY(0);
animation-timing-function:ease-out;
}
40%{
transform:perspective(400px)translateZ(150px)rotateY(170deg);
animation-timing-function:ease-out;
}
50%{
transform:perspective(400px)translateZ(150px)rotateY(190deg)scale(1);
animation-timing-function:ease-in;
}
80%{
transform:perspective(400px)rotateY(360deg)scale(.95);
animation-timing-function:ease-in;
}
100%{
transform:perspective(400px)scale(1);
animation-timing-function:ease-in;
}
}
.swing{
transform-origin:topcenter;
animation:swing2seaseinfinite;
}
@keyframesswing{
20%{transform:rotate(15deg);}
40%{transform:rotate(-10deg);}
60%{transform:rotate(5deg);}
80%{transform:rotate(-5deg);}
100%{transform:rotate(0deg);}
}
.wobble{
animation:wobble2seaseinfinite;
}
@keyframeswobble{
0%{transform:translateX(0%);}
15%{transform:translateX(-25%)rotate(-5deg);}
30%{transform:translateX(20%)rotate(3deg);}
45%{transform:translateX(-15%)rotate(-3deg);}
60%{transform:translateX(10%)rotate(2deg);}
75%{transform:translateX(-5%)rotate(-1deg);}
100%{transform:translateX(0%);}
}
.fade-in-down{
animation:fade-in-down2seaseinfinite;
}
@keyframesfade-in-down{
0%{
opacity:0;
transform:translateY(-20px);
}
100%{
opacity:1;
transform:translateY(0);
}
}
.fade-in-left{
animation:fade-in-left2seaseinfinite;
}
@keyframesfade-in-left{
0%{
opacity:0;
transform:translateX(-20px);
}
100%{
opacity:1;
transform:translateX(0);
}
}
.fade-out-down{
animation:fade-out-down2seaseinfinite;
}
@keyframesfade-out-down{
0%{
opacity:1;
transform:translateY(0);
}
100%{
opacity:0;
transform:translateY(20px);
}
}
.fade-out-right{
animation:fade-out-right2seaseinfinite;
}
@keyframesfade-out-right{
0%{
opacity:1;
transform:translateX(0);
}
100%{
opacity:0;
transform:translateX(20px);
}
}
.bounce-in{
animation:bounce-in2seaseinfinite;
}
@keyframesbounce-in{
0%{
opacity:0;
transform:scale(.3);
}
50%{
opacity:1;
transform:scale(1.05);
}
70%{transform:scale(.9);}
100%{transform:scale(1);}
}
.bounce-in-right{
animation:bounce-in-right2seaseinfinite;
}
@keyframesbounce-in-right{
0%{
opacity:0;
transform:translateX(2000px);
}
60%{
opacity:1;
transform:translateX(-30px);
}
80%{transform:translateX(10px);}
100%{transform:translateX(0);}
}
.bounce-out{
animation:bounce-out2seaseinfinite;
}
@keyframesbounce-out{
0%{transform:scale(1);}
25%{transform:scale(.95);}
50%{
opacity:1;
transform:scale(1.1);
}
100%{
opacity:0;
transform:scale(.3);
}
}
.bounce-out-down{
animation:bounce-out-down2seaseinfinite;
}
@keyframesbounce-out-down{
0%{transform:translateY(0);}
20%{
opacity:1;
transform:translateY(-20px);
}
100%{
opacity:0;
transform:translateY(20px);
}
}
.rotate-in-down-left{
animation:rotate-in-down-left2seaseinfinite;
}
@keyframesrotate-in-down-left{
0%{
transform-origin:leftbottom;
transform:rotate(-90deg);
opacity:0;
}
100%{
transform-origin:leftbottom;
transform:rotate(0);
opacity:1;
}
}
.rotate-in-up-left{
animation:rotate-in-up-left2seaseinfinite;
}
@keyframesrotate-in-up-left{
0%{
transform-origin:leftbottom;
transform:rotate(90deg);
opacity:0;
}
100%{
transform-origin:leftbottom;
transform:rotate(0);
opacity:1;
}
}
.hinge{
animation:hinge2seaseinfinite;
}
@keyframeshinge{
0%{transform:rotate(0);transform-origin:topleft;animation-timing-function:ease-in-out;}
20%,60%{transform:rotate(80deg);transform-origin:topleft;animation-timing-function:ease-in-out;}
40%{transform:rotate(60deg);transform-origin:topleft;animation-timing-function:ease-in-out;}
80%{transform:rotate(60deg)translateY(0);opacity:1;transform-origin:topleft;animation-timing-function:ease-in-out;}
100%{transform:translateY(700px);opacity:0;}
}
.roll-in{
animation:roll-in2seaseinfinite;
}
@keyframesroll-in{
0%{
opacity:0;
transform:translateX(-100%)rotate(-120deg);
}
100%{
opacity:1;
transform:translateX(0px)rotate(0deg);
}
}
.roll-out{
animation:roll-out2seaseinfinite;
}
@keyframesroll-out{
0%{
opacity:1;
transform:translateX(0px)rotate(0deg);
}
100%{
opacity:0;
transform:translateX(100%)rotate(120deg);
}
}
CSSAnimation
loader
gelatine
spin
elasticspin
pulse
flash
hithere!
grow
fadein
fadeout
bounce
bounce2
shake
flip
swing
wobble
fadeindown
fadeinleft
fadeoutdown
fadeoutright
bouncein
bounceinright
bounceout
bounceoutdown
rotateindownleft
rotateinupleft
rollin
rollout
hinge
