CSS3常用动画效果

最新推荐文章于 2023-09-20 09:50:45 发布
最新推荐文章于 2023-09-20 09:50:45 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： CSS3 HTML 文章标签： CSS3动画 网页特效
CSS3 同时被 2 个专栏收录
2 篇文章 0 订阅
订阅专栏
HTML
2 篇文章 0 订阅
订阅专栏

一些CSS3的动画效果

我把CSS3常用的动画共享出来，方便自己也方便大家 代码片.

<!DOCTYPE html>
<html lang="zh-cn"><head>
<meta charset="utf-8">
<title>animation_CSS参考手册</title>
<style>
div{width: 100px; height: 100px; margin: 100px; background:#ddd; border: 1px solid #ccc; border-radius: 50%; text-align: center; line-height: 100px; font-size: 12px; font-family: "微软雅黑"; float:left; margin-right: 30px; margin-top: 30px;}
/*闪光灯动画开始*/
.light{ 	
	-webkit-animation: lightAnimate 1s ease infinite;
	-moz-animation:lightAnimate 1s ease infinite;
	-o-animation:lightAnimate 1s ease infinite;
	-ms-animation:lightAnimate 1s ease infinite;
	animation: lightAnimate 1s ease infinite;
}
@-webkit-keyframes lightAnimate{
	 0%,50%,100%{opacity:1;}
	 25%,75%{ opacity:0;}
}
@-moz-keyframes lightAnimate{
	0%,50%,100%{ opacity: 1;}
	25%,75%{opacity:0;}
}
@-p-keyframes lightAnimate{
	0%,50%,100%{ opacity: 1;}
	25%,75%{opacity:0;}
}
@-ms-keyframes lightAnimate{
	0%,50%,100%{ opacity: 1;}
	25%,75%{opacity:0;}
}
@keyframes lightAnimate{
	0%,50%,100%{ opacity: 1;}
	25%,75%{opacity:0;}
}
/*闪光灯动画结束*/

/*弹起动画开始*/
.bounce{
	-webkit-animation: bounceAnimate 1s ease infinite;
	-moz-animation: bounceAnimate 1s ease infinite;
	-o-animation: bounceAnimate 1s ease infinite;
	-ms-animation: bounceAnimate 1s ease infinite;
	animation: bounceAnimate 1s ease infinite;
}
@-webkit-keyframes bounceAnimate{
	0%,50%,100%{-webkit-transform:translate(0px,0px);}
	25%,75%{-webkit-transform:translate(0px,-30px);}
}
@-moz-keyframes bounceAnimate{
	0%,50%,100%{-moz-transform:translate(0px,0px);}
	25%,75%{-moz-transform:translate(0px,-30px);}
}
@-o-keyframes bounceAnimate{
	0%,50%,100%{-o-transform:translate(0px,0px);}
	25%,75%{-o-transform:translate(0px,-30px);}
}
@-ms-keyframes bounceAnimate{
	0%,50%,100%{-ms-transform:translate(0px,0px);}
	25%,75%{-ms-transform:translate(0px,-30px);}
}
@keyframes bounceAnimate{
	0%,50%,100%{transform:translate(0px,0px);}
	25%,75%{transform:translate(0px,-30px);}
}
.swing{
	-webkit-animation:swingAnimate 1s ease infinite;
	-moz-animation:swingAnimate 1s ease infinite;
	-o-animation:swingAnimate 1s ease infinite;
	-ms-animation:swingAnimate 1s ease infinite;
	animation:swingAnimate 1s ease infinite;	
}
@-webkit-keyframes swingAnimate{
	0%,100%{-webkit-transform:translateX(0px);}
	10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);}
	20%,40%,60%,80%{-webkit-transform:translateX(10px);}
}
@-moz-keyframes swingAnimate{
	0%,100%{-moz-transform:translateX(0px);}
	10%,30%,50%,70%,90%{-moz-transform:translateX(-10PX);}
	20%,40%,60%,80%{-moz-transform:translateX(10px);}
}
@-o-keyframes swingAnimate{
	0%,100%{-o-transform:translateX(0px);}
	10%,30%,50%,70%,90%{-o-transform:translateX(-10PX);}
	20%,40%,60%,80%{-o-transform:translateX(10px);}
}
@-ms-keyframes swingAnimate{
	0%,100%{-ms-transform:translateX(0px);}
	10%,30%,50%,70%,90%{-ms-transform:translateX(-10PX);}
	20%,40%,60%,80%{-ms-transform:translateX(10px);}
}
@keyframes swingAnimate{
	0%,100%{transform:translateX(0px);}
	10%,30%,50%,70%,90%{transform:translateX(-10PX);}
	20%,40%,60%,80%{transform:translateX(10px);}
}
.qiuqian{
	-webkit-animation: qiuqianAnimate 1s ease infinite;
	-moz-animation: qiuqianAnimate 1s ease infinite;
	-o-animation: qiuqianAnimate 1s ease infinite;
	-ms-animation: qiuqianAnimate 1s ease infinite;
	animation: qiuqianAnimate 1s ease infinite;
}
@-webkit-keyframes qiuqianAnimate{
	0%,100%{-webkit-transform: scale(1) rotate(0);}
	10%,30%{-webkit-transform:scale(0.9) rotate(3deg);}
	20%,40%,60%,80%{-webkit-transform: scale(1.1) rotate(-3deg);}
	50%,70%{-webkit-transform: scale(1.1) rotate(3deg);}
}
@-moz-keyframes qiuqianAnimate{
	0%,100%{-moz-transform:scale(1) rotate(0);}
	10%,30%{-moz-transform: scale(0.9) rotate(3deg);}
	20%,40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
	50%,70%{ -moz-transform:scale(1.1) rotate(3deg);}
}
@-o-keyframes qiuqianAnimate{
	0%,100%{-o-transform:scale(1) rotate(0);}
	10%,30%{-o-transform: scale(0.9) rotate(3deg);}
	20%,40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
	50%,70%{ -o-transform:scale(1.1) rotate(3deg);}
}
@-ms-keyframes qiuqianAnimate{
	0%,100%{-ms-transform:scale(1) rotate(0);}
	10%,30%{-ms-transform: scale(0.9) rotate(3deg);}
	20%,40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
	50%,70%{ -ms-transform:scale(1.1) rotate(3deg);}
}
@keyframes qiuqianAnimate{
	0%,100%{transform:scale(1) rotate(0);}
	10%,30%{transform: scale(0.9) rotate(3deg);}
	20%,40%,60%,80%{transform:scale(1.1) rotate(-3deg);}
	50%,70%{ transform:scale(1.1) rotate(3deg);}
}
.leftrightswing{ 
	-webkit-animation:leftrightswingAnimate 1s ease infinite;
	-moz-animation:leftrightswingAnimate 1s ease infinite;
	-o-animation:leftrightswingAnimate 1s ease infinite;
	-ms-animation:leftrightswingAnimate 1s ease infinite;
	animation:leftrightswingAnimate 1s ease infinite;
}
@-webkit-keyframes leftrightswingAnimate{
	-webkit-transform-origin:top center;
	0%,100%{ -webkit-transform: rotate(0);}
	20%{ -webkit-transform:rotate(5deg);}
	40%{-webkit-transform:rotate(-5deg);}
	60%{ -webkit-transform:rotate(10deg);}
	80%{ -webkit-transform:rotate(-10deg);}
	
}
@-moz-keyframes leftrightswingAnimate{
	-moz-transform-origin:top center;
	0%,100%{ -moz-transform: rotate(0);}
	20%{ -moz-transform:rotate(5deg);}
	40%{-moz-transform:rotate(-5deg);}
	60%{ -moz-transform:rotate(10deg);}
	80%{ -moz-transform:rotate(-10deg);}
	
}
@-o-keyframes leftrightswingAnimate{
	-o-transform-origin:top center;
	0%,100%{ -o-transform: rotate(0);}
	20%{ -o-transform:rotate(5deg);}
	40%{-o-transform:rotate(-5deg);}
	60%{ -o-transform:rotate(10deg);}
	80%{ -o-transform:rotate(-10deg);}
	
}
@-ms-keyframes leftrightswingAnimate{
	-ms-transform-origin:top center;
	0%,100%{ -ms-transform: rotate(0);}
	20%{ -ms-transform:rotate(5deg);}
	40%{-ms-transform:rotate(-5deg);}
	60%{ -ms-transform:rotate(10deg);}
	80%{ -ms-transform:rotate(-10deg);}
	
}
@keyframes leftrightswingAnimate{
	transform-origin:top center;
	0%,100%{ transform: rotate(0);}
	20%{ transform:rotate(5deg);}
	40%{transform:rotate(-5deg);}
	60%{transform:rotate(10deg);}
	80%{transform:rotate(-10deg);}
	
}
.crazyswing{
	-webkit-animation: crazyswing 1s ease infinite; 
	-moz-animation: crazyswing 1s ease infinite; 
	-o-animation: crazyswing 1s ease infinite; 
	-ms-animation: crazyswing 1s ease infinite; 
	animation: crazyswing 1s ease infinite; 
}
@-webkit-keyframes crazyswing{
	0%,100%{-webkit-transform:translate(0,0) rotate(0);}
	15%{-webkit-transform: translate(-15%,0) rotate(-5deg);}
	30%{ -webkit-transform: translate(10%,0) rotate(3deg);}
	45%{ -webkit-transform: translate(-10%,0) rotate(-3deg);}
	60%{ -webkit-transform: translate(5%,0) rotate(2deg);}
	75%{ -webkit-transform: translate(-5%,0) rotate(-1deg);}
}
@-moz-keyframes crazyswing{
	0%,100%{ -moz-transform:translate(0.0) rotate(0);}
	15%{ -moz-transform: translate(-15%,0) rotate(-5deg);}
	30%{ -moz-transform: translate(10%,0) rotate(3deg);}
	45%{ -moz-transform: translate(-10%,0) rotate(-3deg);}
	60%{-moz-transform: translate(5%,0) rotate(2deg);}
	75%{ -moz-transform: translate(-5%,0) rotate(-1deg);}
}
@-o-keyframes crazyswing{
	0%,100%{ -o-transform:translate(0.0) rotate(0);}
	15%{ -o-transform: translate(-15%,0) rotate(-5deg);}
	30%{ -o-transform: translate(10%,0) rotate(3deg);}
	45%{ -o-transform: translate(-10%,0) rotate(-3deg);}
	60%{-o-transform: translate(5%,0) rotate(2deg);}
	75%{ -o-transform: translate(-5%,0) rotate(-1deg);}
}
@-ms-keyframes crazyswing{
	0%,100%{ -ms-transform:translate(0.0) rotate(0);}
	15%{ -ms-transform: translate(-15%,0) rotate(-5deg);}
	30%{ -ms-transform: translate(10%,0) rotate(3deg);}
	45%{ -ms-transform: translate(-10%,0) rotate(-3deg);}
	60%{-ms-transform: translate(5%,0) rotate(2deg);}
	75%{ -ms-transform: translate(-5%,0) rotate(-1deg);}
}
@keyframes crazyswing{
	0%,100%{transform:translate(0.0) rotate(0);}
	15%{transform: translate(-15%,0) rotate(-5deg);}
	30%{transform: translate(10%,0) rotate(3deg);}
	45%{transform: translate(-10%,0) rotate(-3deg);}
	60%{transform: translate(5%,0) rotate(2deg);}
	75%{transform: translate(-5%,0) rotate(-1deg);}
}
.pulse{
	-webkit-animation: pulseAnimate 1s ease infinite;
	-moz-animation: pulseAnimate 1s ease infinite;
	-o-animation: pulseAnimate 1s ease infinite;
	-ms-animation: pulseAnimate 1s ease infinite;
	animation: pulseAnimate 1s ease infinite;
}
@-webkit-keyframes pulseAnimate{
	0%,100%{-webkit-transform: scale(1);}
	50%{-webkit-transform: scale(1.1);}
}
@-moz-keyframes pluseAnimate{
	0%,100%{-moz-transform: scale(1);}
	50%{-moz-transform: scale(1.1);}
}
@-o-keyframes pluseAnimate{
	0%,100%{-o-transform: scale(1);}
	50%{-o-transform: scale(1.1);}
}
@-ms-keyframes pluseAnimate{
	0%,100%{-ms-transform: scale(1);}
	50%{-ms-transform: scale(1.1);}
}
@keyframes pluseAnimate{
	0%,100%{transform: scale(1);}
	50%{transform: scale(1.1);}
}
.flig{
	-webkit-animation: fligAnimate 1s ease infinite;
	-moz-animation: fligAnimate 1s ease infinite;
	-o-animation: fligAnimate 1s ease infinite;
	-ms-animation: fligAnimate 1s ease infinite;
	animation: fligAnimate 1s ease infinite;
}
@-webkit-keyframes fligAnimate{
	0%{ -webkit-transform:perspective(400px) rotateY(0);}
	40%{ -webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg);}
	50%{ -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);}
	80%{-webkit-transform: perspective(400px) rotateY(360deg) scale(.95);}
	100%{-webkit-transform: perspective(400) scale(1);}
}
@-moz-keyframes fligAnimate{
	0%{ -moz-transform: perspective(400) rotateY(0);}
	40%{ -moz-transform: perspective(400) translateZ(150px) rotateY(170deg);}
	50%{ -moz-transform: perspective(400) translateZ(150px) rotateY(190deg) scale(1);}
	80%{ -moz-transform:perspective(400) rotateY(360deg) scale(0.95);}
	100%{ -moz-transform: perspective(400) scale(1);}
}
@-o-keyframes figAngimate{
	0%{ -o-transform:perspective(400) rotateY(0);}
	40%{ -o-transform:perspective(400) translateZ(150px) rotateY(170deg);}
	50%{ -o-transform:perspective(400) translateZ(150px) rotateY(190deg) scale(1);}
	80%{ -o-transform:perspective(400) rotateY(360deg) scale(0.95);}
	100%{ -o-transform:perspective(400) scale(1);}
}
@-ms-keyframes figAngimate{
	0%{ -ms-transform:perspective(400) rotateY(0);}
	40%{ -ms-transform:perspective(400) translateZ(150px) rotateY(170deg);}
	50%{ -ms-transform:perspective(400) translateZ(150px) rotateY(190deg) scale(1);}
	80%{ -ms-transform:perspective(400) rotateY(360deg) scale(0.95);}
	100%{ -ms-transform:perspective(400) scale(1);}
}
@keyframes figAngimate{
	0%{ transform:perspective(400) rotateY(0);}
	40%{transform:perspective(400) translateZ(150px) rotateY(170deg);}
	50%{transform:perspective(400) translateZ(150px) rotateY(190deg) scale(1);}
	80%{ transform:perspective(400) rotateY(360deg) scale(0.95);}
	100%{ transform:perspective(400) scale(1);}
}
.xeasein{
	-webkit-animation: xeaseinAnimate 1s ease infinite;
	-moz-animation: xeaseinAnimate 1s ease infinite;
	-o-animation: xeaseinAnimate 1s ease infinite;
	-ms-animation: xeaseinAnimate 1s ease infinite;
	animation: xeaseinAnimate 1s ease infinite;
}
@-webkit-keyframes xeaseinAnimate{
	0%{ -webkit-transform:perspective(400) rotateX(90deg); opacity:0}
	40%{ -webkit-transform:perspective(400) rotateX(-10deg);}
	70%{ -webkit-transform:perspective(400) rotateX(10deg);}
	100%{ -webkit-transform:perspective(400) rotateX(0deg); opacity:1;}
}
@-moz-keyframes xeaseinAnimate{
	0%{ -moz-transform:perspective(400) rotateX(90deg); opacity:0}
	40%{ -moz-transform:perspective(400) rotateX(-10deg);}
	70%{ -moz-transform:perspective(400) rotateX(10deg);}
	100%{ -moz-transform:perspective(400) rotateX(0deg); opacity:1;}
}
@-o-keyframes xeaseinAnimate{
	0%{ -o-transform:perspective(400) rotateX(90deg); opacity:0}
	40%{ -o-transform:perspective(400) rotateX(-10deg);}
	70%{ -o-transform:perspective(400) rotateX(10deg);}
	100%{ -o-transform:perspective(400) rotateX(0deg); opacity:1;}
}
@-ms-keyframes xeaseinAnimate{
	0%{ -ms-transform:perspective(400) rotateX(90deg); opacity:0}
	40%{ -ms-transform:perspective(400) rotateX(-10deg);}
	70%{ -ms-transform:perspective(400) rotateX(10deg);}
	100%{ -ms-transform:perspective(400) rotateX(0deg); opacity:1;}
}
@keyframes xeaseinAnimate{
	0%{ transform:perspective(400) rotateX(90deg); opacity:0}
	40%{ transform:perspective(400) rotateX(-10deg);}
	70%{transform:perspective(400) rotateX(10deg);}
	100%{ transform:perspective(400) rotateX(0deg); opacity:1;}
}
.xeaseout{ 
	-webkit-animation: xeaseoutAnimate 1s ease both infinite;
	-moz-animation: xeaseoutAnimate 1s ease both infinite;
	-o-animation: xeaseoutAnimate 1s ease both infinite;
	-ms-animation: xeaseoutAnimate 1s ease both infinite;
	animation: xeaseoutAnimate 1s ease both infinite; 
}
@-webkit-keyframes xeaseoutAnimate{
	0%{ -webkit-transform: rotateX(0deg); opacity:1;}
	100%{-webkit-transform: rotateX(90deg); opacity:0;}
}
@-moz-keyframes xeaseoutAnimate{
	0%{ -moz-transform: rotateX(0deg); opacity:1;}
	100%{-moz-transform: rotateX(90deg); opacity:0;}
}
@-o-keyframes xeaseoutAnimate{
	0%{ -o-transform: rotateX(0deg); opacity:1;}
	100%{-o-transform: rotateX(90deg); opacity:0;}
}
@-ms-keyframes xeaseoutAnimate{
	0%{ -ms-transform: rotateX(0deg); opacity:1;}
	100%{-ms-transform: rotateX(90deg); opacity:0;}
}
@keyframes xeaseoutAnimate{
	0%{ transform: rotateX(0deg); opacity:1;}
	100%{transform: rotateX(90deg); opacity:0;}
}
.yeasein{
	-webkit-animation: yeaseinAnimate 1s ease infinite;
	-moz-animation: yeaseinAnimate 1s ease infinite;
	-o-animation: yeaseinAnimate 1s ease infinite;
	-ms-animation: yeaseinAnimate 1s ease infinite;
	animation: yeaseinAnimate 1s ease infinite;
}
@-webkit-keyframes yeaseinAnimate{
	0%{ -webkit-transform:perspective(400px) rotateY(90deg);; opacity: 0;}
	40%{ -webkit-transform:perspective(400px) rotateY(-10deg);}
	70%{ -webkit-transform:perspective(400px) rotateY(10deg);}
	100%{ -webkit-transform:perspective(400px) rotateY(0deg); opacity: 1;}
}
@-moz-keyframes yeaseinAnimate{
	0%{ -moz-transform:perspective(400px) rotateY(90deg);; opacity: 0;}
	40%{ -moz-transform:perspective(400px) rotateY(-10deg);}
	70%{ -moz-transform:perspective(400px) rotateY(10deg);}
	100%{ -moz-transform:perspective(400px) rotateY(0deg); opacity: 1;}
}
@-o-keyframes yeaseinAnimate{
	0%{ -o-transform:perspective(400px) rotateY(90deg);; opacity: 0;}
	40%{ -o-transform:perspective(400px) rotateY(-10deg);}
	70%{ -o-transform:perspective(400px) rotateY(10deg);}
	100%{ -o-transform:perspective(400px) rotateY(0deg); opacity: 1;}
}
@-ms-keyframes yeaseinAnimate{
	0%{ -ms-transform:perspective(400px) rotateY(90deg);; opacity: 0;}
	40%{ -ms-transform:perspective(400px) rotateY(-10deg);}
	70%{ -ms-transform:perspective(400px) rotateY(10deg);}
	100%{ -ms-transform:perspective(400px) rotateY(0deg); opacity: 1;}
}
@keyframes yeaseinAnimate{
	0%{transform:perspective(400px) rotateY(90deg);; opacity: 0;}
	40%{ transform:perspective(400px) rotateY(-10deg);}
	70%{ transform:perspective(400px) rotateY(10deg);}
	100%{transform:perspective(400px) rotateY(0deg); opacity: 1;}
}
.yeaseout{
	-webkit-animation: yeaseoutAnimate 1s ease forwards infinite;
	-moz-animation: yeaseoutAnimate 1s ease forwards infinite;
	animation: yeaseoutAnimate 1s ease forwards infinite;
}
@-webkit-keyframes yeaseoutAnimate{
	0%{ -webkit-transform: rotateY(0); opacity:1}
	100%{ -webkit-transform: rotateY(90deg); opacity:0}
}
@-moz-keyframes yeaseoutAnimate{
	0%{ -moz-transform: rotateY(0); opacity:1}
	100%{ -moz-transform: rotateY(90deg); opacity:0}
}
@keyframes yeaseoutAnimate{
	0%{ transform: rotateY(0); opacity:1}
	100%{ transform: rotateY(90deg); opacity:0}
}
.bottomeasein{
	-webkit-animation: bottomeaseinAnimate 1s ease forwards infinite;
	-moz-animation: bottomeaseinAnimate 1s ease forwards infinite;
	animation: bottomeaseinAnimate 1s ease forwards infinite;
}
@-webkit-keyframes bottomeaseinAnimate{
	0%{ -webkit-transform: translateY(20px); opacity:0;}
	100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@keyframes bottomeaseinAnimate{
	0%{ transform: translateY(20px); opacity:0;}
	100%{ transform: translateY(0px); opacity: 1;}
}
.topeasein{
	-webkit-animation: topeaseinAnimate 1s ease infinite;
	animation: topeaseinAnimate 1s ease infinite;
}
@-webkit-keyframes topeaseinAnimate{
	0%{ -webkit-transform: translateY(-20px); opacity: 0;}
	100%{ -webkit-transform: translateY(0); opacity: 1;}
}
@keyframes topeaseinAnimate{
	0%{ -transform: translateY(-20px); opacity: 0;}
	100%{ transform: translateY(0); opacity: 1;}
}
.lefteasein{
	-webkit-animation: lefteaseinAnimate 1s ease infinite;
	animation: lefteaseinAnimate 1s ease infinite;
}
@-webkit-keyframes lefteaseinAnimate{
	0%{ -webkit-transform: translateX(-20px); opacity: 0;}
	100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@keyframes lefteaseinAnimate{
	0%{ transform: translateX(-20px); opacity: 0;}
	100%{ transform: translateX(0px); opacity: 1;}
}
.righteasein{
	-webkit-animation: righteaseinAnimate 1s ease infinite;
	animation: righteaseinAnimate 1s ease infinite;
}
@-webkit-keyframes righteaseinAnimate{
	0%{ -webkit-transform:translateX(20px); opacity: 0;}
	100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@keyframes righteaseinAnimate{
	0%{transform:translateX(20px); opacity: 0;}
	100%{ transform: translateX(0px); opacity: 1;}
}
.boteasein{
	-webkit-animation: boteaseinAnimate 1s ease .5s infinite;
	animation: boteaseinAnimate 1s ease .5s infinite;
}
@-webkit-keyframes boteaseinAnimate{
	0%{ -webkit-transform: translateY(200px); opacity: 0;}
	100%{ -webkit-transform: translateY(0px); opacity: 1;}
}
@keyframes boteaseinAnimate{
	0%{ transform: translateY(200px); opacity: 0;}
	100%{ transform: translateY(0px); opacity: 1;}
}
.toppeasein{
	-webkit-animation: toppeaseinAnimate 1s ease .5s infinite;
	animation: toppeaseinAnimate 1s ease .5s infinite;
}
@-webkit-keyframes toppeaseinAnimate{
	0%{ -webkit-transform: translateY(-2000px); opacity: 0;}
	100%{ -webkit-transform: translateY(0); opacity: 1;}
}
.bouncein{
	-webkit-animation: bounceinAnimate 1s ease infinite;
	animation: bounceinAnimate 1s ease infinite;
}
@-webkit-keyframes bounceinAnimate{
	0%{ -webkit-transform: scale(.3);}
	50%{ -webkit-transform: scale(1.05);}
	70%{ -webkit-transform: scale(0.9);}
	100%{ -webkit-transform: scale(1);}
}
@keyframes bounceinAnimate{
	0%{ transform: scale(.3);}
	50%{transform: scale(1.05);}
	70%{ transform: scale(0.9);}
	100%{transform: scale(1);}
}
.bounceinDown{
	-webkit-animation: bounceinDownAnimate 1s ease .5s infinite;
	animation: bounceinDownAnimate 1s ease .5s infinite;
}
@-webkit-keyframes bounceinDownAnimate{
	0%{ -webkit-transform: translateY(-200px);}
	30%{ -webkit-transform: translateY(30px);}
	70%{ -webkit-transform: translateY(-10px);}
	100%{ -webkit-transform: translateY(0px);}
}
.bounceout{
	-webkit-animation: bounceoutAnimate 1s ease forwards infinite;
	animation: bounceoutAnimate 1s ease forwards infinite;
}
@-webkit-keyframes bounceoutAnimate{
	0%{ -webkit-transform: scale(1);}
	50%{ -webkit-transform: scale(0.9);}
	70%{ -webkit-transform: scale(1.05);}
	100%{ -webkit-transform: scale(.3);}
}
@keyframes bounceoutAnimate{
	0%{transform: scale(1);}
	50%{ transform: scale(0.9);}
	70%{transform: scale(1.05);}
	100%{transform: scale(.3);}
}
.rotatein{
	-webkit-animation: rotateinAnimate 1s ease infinite;
	animation: rotateinAnimate 1s ease infinite;
}
@-webkit-keyframes rotateinAnimate{
	0%{ -webkit-transform: rotate(-200deg);}
	100%{ -webkit-transform: rotate(0deg);}
}
@keyframes rotateinAnimate{
	0%{ transform: rotate(-200deg);}
	100%{ transform: rotate(0deg);}
}
.rotateinleftbot{ 
	-webkit-animation: rotateinleftbotAnimate 1s ease infinite;
	animation: rotateinleftbotAnimate 1s ease infinite;
}
@-webkit-keyframes rotateinleftbotAnimate{	
	0%{ -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg);}
	100%{-webkit-transform-origin: left bottom; -webkit-transform: rotate(0deg);}
}
@keyframes rotateinleftbotAnimate{	
	0%{ transform-origin: left bottom;transform: rotate(-90deg);}
	100%{transform-origin: left bottom; transform: rotate(0deg);}
}
.higne{
	-webkit-animation: higneAnimate 1s ease infinite;
	animation: higneAnimate 1s ease;
}
@-webkit-keyframes higneAnimate{
	0%{ 
		-webkit-transform-origin: left top;
		-webkit-transform: rotate(0);
	}
	20%,80%{ 
		-webkit-transform-origin: left top;
		-webkit-transform: rotate(80deg);
	}
	60%{ 
		-webkit-transform-origin: left top;
		-webkit-transform: rotate(20deg);
	}
	100%{ -webkit-transform: translateY(300px);}
}
@-keyframes higneAnimate{
	0%{ 
		transform-origin: left top;
		-transform: rotate(0);
	}
	20%,80%{ 
		transform-origin: left top;
		transform: rotate(80deg);
	}
	60%{ 
		transform-origin: left top;
		transform: rotate(20deg);
	}
	100%{ transform: translateY(300px);}
}
.rollin{
	-webkit-animation: rollinAnimate 1s ease infinite;
	animation: rollinAnimate 1s ease infinite;
}
@-webkit-keyframes rollinAnimate{
	0%{ -webkit-transform: translateX(-100px) rotate(-120deg); opacity: 0;}
	100%{ -webkit-transform: translateX(0) rotate(0); opacity: 1;}
}
.rollout{
	-webkit-animation: rolloutAnimate 1s ease infinite;
	animation: rolloutAnimate 1s ease infinite;
}
@-webkit-keyframes rolloutAnimate{
	0%{-webkit-transform: translateX(0px) rotate(0); opacity: 1;}
	100%{ -webkit-transform: translateX(100px) rotate(120deg); opacity: 0;}
}
</style>
</head>
<body>
	<!--闪光灯动画开始-->
	<div class="light">闪光灯动画</div>
	<!--弹起动画开始-->
	<div class="bounce">弹起动画</div>
	<!--摇摆动画开始-->
	<div class="swing">摇摆动画</div>
	<!--秋千动画开始-->
	<div class="qiuqian">秋千动画</div>
	<!--左右摇摆动画开始-->
	<div class="leftrightswing">左右摇摆动画</div>
	<!--疯狂摇摆动画开始-->
	<div class="crazyswing">疯狂摇摆动画</div>
	<!--脉冲动画开始-->
	<div class="pulse">脉冲动画</div>
	<!--翻转动画开始-->
	<div class="flig">翻转动画</div>
	<!--x轴淡入动画开始-->
	<div class="xeasein">x轴淡入动画</div>
	<!--x轴淡出动画开始-->
	<div class="xeaseout">x轴淡出动画</div>
	<!--Y轴淡入动画开始-->
	<div class="yeasein">Y轴淡入动画</div>
	<!--y轴淡出动画开始-->
	<div class="yeaseout">y轴淡出动画</div>
	<!--下方淡入动画开始-->
	<div class="bottomeasein">下方淡入动画</div>
	<!--上方淡入动画开始-->
	<div class="topeasein">上方淡入动画</div>
	<!--左边淡入动画开始-->
	<div class="lefteasein">左边淡入动画</div>
	<!--右边淡入动画开始-->
	<div class="righteasein">右边淡入动画</div>
	<!--底部淡入动画开始-->
	<div class="boteasein">底部淡入动画</div>
	<!--顶部淡入动画开始-->
	<div class="toppeasein">顶部淡入动画</div>
	<!--弹起进入动画开始-->
	<div class="bouncein">弹起进入动画</div>
	<!--弹起上方进入动画开始-->
	<div class="bounceinDown">弹起上方进入</div>
	<!--弹起退出动画开始-->
	<div class="bounceout">弹起退出动画</div>
	<!--旋转进入动画开始-->
	<div class="rotatein">旋转进入</div>
	<!--左下角进入动画开始-->
	<div class="rotateinleftbot">左下角进入</div>
	<!--左上旋转退出动画开始-->
	<div class="higne">左上旋转退出</div>
	<!--右移旋转进入动画开始-->
	<div class="rollin">右移旋转进入</div>
	<!--右移旋转出去动画开始-->
	<div class="rollout">右移旋转出去</div>
</body></html>

网页展示效果如下，有很多跳动的圆球：
在这里插入图片描述

laipengfei19
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
weixin_35951321的博客
08-04 1792
在现代网页中，我们已经越来越习惯使用大量的CSS3元素，而现在的浏览器也基本都支持CSS3，所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画，有几个非常经典，比如大象走路的那个，如果你对CSS3感兴趣，赶紧来看看吧。1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画，效果相当震撼。这一次要给大家介绍的是一款纯CSS...
各种css3效果动画
06-05
集合各种css3的效果和动画，一共12个，都是常用的效果展示，和一些细节的动画
css3-animate动画特效大全
01-08
css3-animate动画特效大全 主要以css3 的@keyframes 规则来创建动画。
30个免费的CSS3动画片段代码
Mencre的博客
02-15 6756
对于网页设计师来说，前端代码CSS/HTML不是强项，但有时候也是需要写的。特别是现在流行CSS3动画，学习和了解一些相关知识是必须的。CSS3动画其实不算复杂，比JS简单得多，今天我们整理自CODEPEN上的一些好看的CSS3动画片段，从这些案例中设计师可以从中学习，并了解一些新的代码写法，又或者获取一些动画灵感也是不错的哦。以下为CSS3动画案例整理：青蛙与小船动画美丽的小河，有一只可爱的小蛙...
直播系统代码，几种CSS3常用动画效果和样式
云豹网络科技
07-29 710
以上就是直播系统代码，几种CSS3常用动画效果和样式，更多内容欢迎关注之后的文章。直播系统代码，几种CSS3常用动画效果和样式。
css3 动画的实现
青蛙king的博客
12-15 2358
js 的方法实现动画（这是一个实验功能，此功能某些浏览器尚在开发中。详见这里）。@keyframes+animation：这是一个实现动画的组合，必须一起使用。transition：表示过渡。transition 可以单独使用，transform：表示变形。使用 transform 实现动画时有两种选择：transform+transition：一次性动画。transform 定义行为，transition 驱动，但一次仅能驱动一次。
css3特效样式库
anda9128的博客
04-20 607
直接调用样式类即可： 1 /* animation */ 2 .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-animation:1s ease;-moz-animation:1s ease;-ms-animation:1s ease;animation:1s ease;} ...
css3各种动画效果合集（二）
qq_53541336的博客
09-20 227
【代码】css各种动画合集（二）
几种CSS3常用动画效果和样式
觉醒法师的专栏
05-01 923
Css几种动画效果，360旋转，放大、旋转放大、上下左右移动、动画延迟、背景渐变色、自定义滚动条等等
css3的一些动画（代码及演示）
qq_43955202的博客
03-31 4828
CSS3 的一些动画（代码及演示） 1. 过渡： Transition(实现元素不同状态间的平滑过渡） 补间动画：从初始状态到终了状态。 帧动画：按固定顺序和速度播放。 属性： Transition-property：all； 所有属性均过渡 Transition-duration：1s； 设置过渡时间 Transition-timing-function:linear;设置运动曲线 （...
117个纯css3鼠标经过动画效果.rar
02-12
117个纯css3鼠标经过效果，Animatia 纯CSS3鼠标悬浮图片动画效果，web常用动画库。
CSS3发光粒子背景动画特效
04-25
CSS3发光粒子背景动画特效是一款基于css3 animation属性绘制的透明悬浮发光粒子酷炫动画特效。
css动画效果之animation的常用样式
11-19
animation动画 定义一个动画： /*设置一个关键帧，定义动画每一步执行的动作*/ @keyframes mybox{ 0%{transform: translate(0,0);} 25%{transform: translate(200px,0);} 50%{transform: translate(200px,200px)...
常用的5种纯css3鼠标滑过图片动画效果
09-08
常用的5种纯css3鼠标滑过图片动画效果
2024-2030全球及中国控制膨胀合金箔行业研究及十五五规划分析报告.docx
04-18
2024-2030全球及中国控制膨胀合金箔行业研究及十五五规划分析报告
通信历年真题选择题汇总1.(DOC).doc
04-18
通信历年真题选择题汇总1.(DOC).doc
电子通信设计资料电子万年历设计与制作论文资料
04-18
电子通信设计资料电子万年历设计与制作论文资料提取方式是百度网盘分享地址
JSP-SSM健身俱乐部客户关系管理系统可升级SpringBoot源码.7z
最新发布
04-18
前台框架基于Bootstrap这一HTML5响应式框架，能够自适应不同终端设备的屏幕大小，为用户提供良好的浏览体验。开发环境兼容myEclipse、Eclipse、Idea等多种工具，配合mysql数据库，实现数据的存储与管理。后台则采用SSM（SpringMVC + Spring + Mybatis）框架，保证系统的稳定与高效运行。 系统主要包括会员信息管理、员工信息管理、设备信息管理以及退出模块。会员信息管理模块详细记录了会员的基本信息、健身目标、消费记录以及健身习惯等，同时设有会员投诉管理模块，用于收集和处理会员的意见与建议。员工信息管理模块则涵盖了员工的基本信息、工资发放情况等，帮助俱乐部进行人事管理。设备信息管理模块则负责建立器械档案，跟踪维修情况，并合理安排器械摆放位置，以延长器械使用寿命。 数据库设计方面，会员表记录了会员的各项基本信息，包括姓名、性别、职业等；部门表与员工表则分别用于记录俱乐部的组织机构和员工信息；会员消费表记录了会员的消费详情；员工工资表则用于记录员工的工资发放情况；留言表用于收集会员的留言及回复；设备类别表与设备表则详细记录了会所内器械的分类与具
css3 transition动画效果
04-10
CSS3 transition动画效果是一种页面元素在发生改变时，可以呈现出平滑过渡的效果，使页面更加生动、有趣。常用的动画效果包括淡入淡出、旋转、缩放、移动等。这些效果能够提高页面的视觉效果和用户的体验，让网页变得更加吸引人。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值