css3 动画大全

最新推荐文章于 2024-10-19 05:58:48 发布
原创 最新推荐文章于 2024-10-19 05:58:48 发布 · 348 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3动画 #动画

本文整理了一系列CSS3动画效果代码，包括淡入、左右上下移动、弹跳、翻转、缩放等多种动画，适用于网页元素的动态展示，为设计师和开发者提供丰富的视觉效果选择。
整理的css3动画大全代码（很不错哦）

很久之前整理的一些css3动画效果，方便自己使用，感觉很方便

/*淡入*/
@-webkit-keyframes fadeIn{
	0%{opacity:0}
	to{opacity:1}
}
@keyframes fadeIn{
	0%{opacity:0}
	to{opacity:1}
}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
/*左到右移入*/
@-webkit-keyframes fadeInLeft{
	0%{opacity:0;-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInLeft{
	0%{opacity:0;-webkit-transform:translate3d(-200px,0,0);transform:translate3d(-200px,0,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
/*右到左移入*/
@-webkit-keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}@keyframes fadeInRight{
	0%{opacity:0;-webkit-transform:translate3d(200px,0,0);transform:translate3d(200px,0,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
/*上到下移入*/
@-webkit-keyframes fadeInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-200px,0);transform:translate3d(0,-200px,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
/*下到上移入*/
@-webkit-keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,200px,0);transform:translate3d(0,200px,0)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
/*左到右弹入*/
@-webkit-keyframes bounceInLeft{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
	75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
	90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
	to{-webkit-transform:none;transform:none}
}
@keyframes bounceInLeft{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}
	75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}
	90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}
	to{-webkit-transform:none;transform:none}
}
.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}
/*右到左弹入*/
@-webkit-keyframes bounceInRight{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
	75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
	90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
	to{-webkit-transform:none;transform:none}
}
@keyframes bounceInRight{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}
	60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}
	75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}
	90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}
	to{-webkit-transform:none;transform:none}
}
.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}
/*上到下弹入*/
@-webkit-keyframes bounceInDown{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
	60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
	75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
	90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
	to{-webkit-transform:none;transform:none}
}
@keyframes bounceInDown{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}
	60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}
	75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}
	90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}
	to{-webkit-transform:none;transform:none}
}
.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}
/*下到上弹入*/
@-webkit-keyframes bounceInUp{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
	60%{opacity:1;-webkit-transform:translate3d(0,-25px,0);transform:translate3d(0,-25px,0)}
	75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
	90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
	to{-webkit-transform:none;transform:none}
}
@keyframes bounceInUp{
	0%,60%,75%,90%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}
	60%{opacity:1;-webkit-transform:translate3d(0,-25px,0);transform:translate3d(0,-25px,0)}
	75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}
	90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}
	to{-webkit-transform:none;transform:none}
}
.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}


/*中心翻转*/
@-webkit-keyframes flipInY{
	0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}
	40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}
	80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@keyframes flipInY{
	0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}
	40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}
	80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}

/*中心放大*/
@-webkit-keyframes zoomIn{
	0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
	50%{opacity:1}
}
@keyframes zoomIn{
	0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
	50%{opacity:1}
}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
/*中心缩小*/
@-webkit-keyframes puffIn{
	0%{opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(2)}
	to{opacity:1;-webkit-transform-origin:50% 50%;-webkit-transform:scale(1)}
}
@keyframes puffIn{
	0%{opacity:0;transform-origin:50% 50%;transform:scale(2)}
	to{opacity:1;transform-origin:50% 50%;transform:scale(1)}
}
.puffIn{-webkit-animation-name:puffIn;animation-name:puffIn}
/*中心弹入*/
@-webkit-keyframes bounceIn{
	0%,20%,40%,60%,80%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
	20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
	40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
	60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
	80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
	to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes bounceIn{
	0%,20%,40%,60%,80%,to{transition-timing-function:cubic-bezier(.215,.61,.355,1)}
	0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
	20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}
	40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}
	60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}
	80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}
	to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}
}
.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}
/*中心翻开*/
@-webkit-keyframes flipInX{
	0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}
	40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}
	80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
@keyframes flipInX{
	0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}
	40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}
	80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}
	to{-webkit-transform:perspective(400px);transform:perspective(400px)}
}
.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}

/*翻滚进入左到右*/
@-webkit-keyframes rollInRight{
	0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg)}
	to{opacity:1;-webkit-transform:none}
}
@keyframes rollInRight{
	0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.rollInRight{-webkit-animation-name:rollInRight;animation-name:rollInRight}
/*翻滚进入右到左*/
@-webkit-keyframes rollInLeft{
	0%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes rollInLeft{
	0%{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.rollInLeft{-webkit-animation-name:rollInLeft;animation-name:rollInLeft}
/*翻滚进入上到下*/
@-webkit-keyframes rollInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-100%,0) rotateX(120deg);transform:translate3d(0,-100%,0) rotateX(120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}@keyframes rollInDown{
	0%{opacity:0;-webkit-transform:translate3d(0,-100%,0) rotateX(120deg);transform:translate3d(0,-100%,0) rotateX(120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.rollInDown{-webkit-animation-name:rollInDown;animation-name:rollInDown}
/*翻滚进入下到上*/
@-webkit-keyframes rollInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,100%,0) rotateX(-120deg);transform:translate3d(0,100%,0) rotateX(-120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes rollInUp{
	0%{opacity:0;-webkit-transform:translate3d(0,100%,0) rotateX(-120deg);transform:translate3d(0,100%,0) rotateX(-120deg)}
	to{opacity:1;-webkit-transform:none;transform:none}
}
.rollInUp{-webkit-animation-name:rollInUp;animation-name:rollInUp}

/*魔幻进入左到右*/
@-webkit-keyframes twisterInDownRight{
	0%{opacity:0;-webkit-transform-origin:left top;-webkit-transform:scale(1) translateX(-100%) rotate(1turn)}
	30%{-webkit-transform-origin:left top;-webkit-transform:scale(0) translateX(-100%) rotate(1turn)}
	to{opacity:1;-webkit-transform-origin:left top;-webkit-transform:scale(1) translateX(0) rotate(0deg)}
}
@keyframes twisterInDownRight{
	0%{opacity:0;transform-origin:left top;transform:scale(0) translateX(-100%) rotate(1turn)}
	30%{transform-origin:left top;transform:scale(0) translateX(-100%) rotate(1turn)}
	to{opacity:1;transform-origin:left top;transform:scale(1) translateX(0) rotate(0deg)}
}
.twisterInDownRight{-webkit-animation-name:twisterInDownRight;animation-name:twisterInDownRight}
/*魔幻进入右到左*/
@-webkit-keyframes twisterInDownLeft{
	0%{opacity:0;-webkit-transform-origin:right bottom;-webkit-transform:scale(0) translateX(100%) rotate(-1turn)}
	30%{-webkit-transform-origin:right bottom;-webkit-transform:scale(0) translateX(100%) rotate(-1turn)}
	to{opacity:1;-webkit-transform-origin:right bottom;-webkit-transform:scale(1) translateX(0) rotate(0deg)}
}
@keyframes twisterInDownLeft{
	0%{opacity:0;transform-origin:right bottom;transform:scale(0) translateX(100%) rotate(-1turn)}
	30%{transform-origin:right bottom;transform:scale(0) translateX(100%) rotate(-1turn)}
	to{opacity:1;transform-origin:right bottom;transform:scale(1) translateX(0) rotate(0deg)}
}
.twisterInDownLeft{-webkit-animation-name:twisterInDownLeft;animation-name:twisterInDownLeft}
/*魔幻进入上到下*/
@-webkit-keyframes twisterInDownDown{
	0%{opacity:0;-webkit-transform-origin:right top;-webkit-transform:scale(0) translateY(-100%) rotate(1turn)}
	30%{-webkit-transform-origin:right top;-webkit-transform:scale(0) translateY(-100%) rotate(1turn)}
	to{opacity:1;-webkit-transform-origin:right top;-webkit-transform:scale(1) translateY(0) rotate(0deg)}
}
@keyframes twisterInDownDown{
	0%{opacity:0;transform-origin:right top;transform:scale(0) translateY(-100%) rotate(1turn)}
	30%{transform-origin:right top;transform:scale(0) translateY(-100%) rotate(1turn)}
	to{opacity:1;transform-origin:right top;transform:scale(1) translateY(0) rotate(0deg)}
}
.twisterInDownDown{-webkit-animation-name:twisterInDownDown;animation-name:twisterInDownDown}
/*魔幻进入下到上*/
@-webkit-keyframes twisterInDownUp{
	0%{opacity:0;-webkit-transform-origin:left bottom;-webkit-transform:scale(0) translateY(100%) rotate(-1turn)}
	30%{-webkit-transform-origin:left bottom;-webkit-transform:scale(0) translateY(100%) rotate(-1turn)}
	to{opacity:1;-webkit-transform-origin:left bottom;-webkit-transform:scale(1) translateY(0) rotate(0deg)}
}
@keyframes twisterInDownUp{
	0%{opacity:0;transform-origin:left bottom;transform:scale(0) translateY(100%) rotate(-1turn)}
	30%{transform-origin:left bottom;transform:scale(0) translateY(100%) rotate(-1turn)}
	to{opacity:1;transform-origin:left bottom;transform:scale(1) translateY(0) rotate(0deg)}
}
.twisterInDownUp{-webkit-animation-name:twisterInDownUp;animation-name:twisterInDownUp}
/*光速进入左到右*/
@-webkit-keyframes lightSpeedInRight{
	0%{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
@keyframes lightSpeedInRight{
	0%{-webkit-transform:translate3d(-100%,0,0) skewX(-30deg);transform:translate3d(-100%,0,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
.lightSpeedInRight{-webkit-animation-name:lightSpeedInRight;animation-name:lightSpeedInRight;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
/*光速进入右到左*/
@-webkit-keyframes lightSpeedInLeft{
	0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
@keyframes lightSpeedInLeft{
	0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
.lightSpeedInLeft{-webkit-animation-name:lightSpeedInLeft;animation-name:lightSpeedInLeft;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
/*光速进入上到下*/
@keyframes lightSpeedInDown{
	0%{-webkit-transform:translate3d(0,-100%,0) skewX(-30deg);transform:translate3d(0,-100%,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
@-webkit-keyframes lightSpeedInDown{
	0%{-webkit-transform:translate3d(0,-100%,0) skewX(-30deg);transform:translate3d(0,-100%,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
.lightSpeedInDown{-webkit-animation-name:lightSpeedInDown;animation-name:lightSpeedInDown;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
/*光速进入下到上*/
@keyframes lightSpeedInUp{
	0%{-webkit-transform:translate3d(0,100%,0) skewX(-30deg);transform:translate3d(0,100%,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
@-webkit-keyframes lightSpeedInUp{
	0%{-webkit-transform:translate3d(0,100%,0) skewX(-30deg);transform:translate3d(0,100%,0) skewX(-30deg);opacity:0}
	60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}
	80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}
	to{-webkit-transform:none;transform:none;opacity:1}
}
.lightSpeedInUp{-webkit-animation-name:lightSpeedInUp;animation-name:lightSpeedInUp;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}

/*旋转进入左到右*/
@-webkit-keyframes twisterInUpRight{
	0%{opacity:0;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateX(-100%) rotate(-1turn)}
	to{opacity:1;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateX(0) rotate(0deg)}
}
@keyframes twisterInUpRight{
	0%{opacity:0;transform-origin:center center;transform:scale(1) translateX(-100%) rotate(-1turn)}
	to{opacity:1;transform-origin:center center;transform:scale(1) translateX(0) rotate(0deg)}
}
.twisterInUpRight{-webkit-animation-name:twisterInUpRight;animation-name:twisterInUpRight}

/*旋转进入右到左*/
@-webkit-keyframes twisterInUpLeft{
	0%{opacity:0;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateX(100%) rotate(1turn)}
	to{opacity:1;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateX(0) rotate(0deg)}
}
@keyframes twisterInUpLeft{
	0%{opacity:0;transform-origin:center center;transform:scale(1) translateX(100%) rotate(1turn)}
	to{opacity:1;transform-origin:center center;transform:scale(1) translateX(0) rotate(0deg)}
}
.twisterInUpLeft{-webkit-animation-name:twisterInUpLeft;animation-name:twisterInUpLeft}

/*旋转进入上到下*/
@-webkit-keyframes twisterInUpDown{
	0%{opacity:0;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateY(-100%) rotate(-1turn)}
	to{opacity:1;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateY(0) rotate(0deg)}
}
@keyframes twisterInUpDown{
	0%{opacity:0;transform-origin:center center;transform:scale(1) translateY(-100%) rotate(-1turn)}
	to{opacity:1;transform-origin:center center;transform:scale(1) translateY(0) rotate(0deg)}
}
.twisterInUpDown{-webkit-animation-name:twisterInUpDown;animation-name:twisterInUpDown}

/*旋转进入下到上*/
@-webkit-keyframes twisterInUpUp{
	0%{opacity:0;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateY(100%) rotate(1turn)}
	to{opacity:1;-webkit-transform-origin:center center;-webkit-transform:scale(1) translateY(0) rotate(0deg)}
}
@keyframes twisterInUpUp{
	0%{opacity:0;transform-origin:center center;transform:scale(1) translateY(100%) rotate(1turn)}
	to{opacity:1;transform-origin:center center;transform:scale(1) translateY(0) rotate(0deg)}
}
.twisterInUpUp{-webkit-animation-name:twisterInUpUp;animation-name:twisterInUpUp}


/***强调***/

/*摇摆*/
@-webkit-keyframes wobble{
	0%{-webkit-transform:none;transform:none}
	15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}
	30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}
	45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}
	60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}
	75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}
	to{-webkit-transform:none;transform:none}
}
@keyframes wobble{
	0%{-webkit-transform:none;transform:none}
	15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}
	30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}
	45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}
	60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}
	75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}
	to{-webkit-transform:none;transform:none}
}
.wobble{-webkit-animation-name:wobble;animation-name:wobble}

/*抖动*/
@-webkit-keyframes rubberBand{
	0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
	30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
	40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
	50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
	65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
	75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
	to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes rubberBand{
	0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
	30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}
	40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}
	50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
	65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}
	75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}
	to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}

/*旋转*/
@-webkit-keyframes rotateIn{
	0%{-webkit-transform:rotate(0deg)}
	to{-webkit-transform:rotate(1turn)}
}
@keyframes rotateIn{
	0%{transform:rotate(0deg)}
	to{transform:rotate(1turn)}
}
.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}

/*翻转*/
@-webkit-keyframes flip{
	0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
@keyframes flip{
	0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}
	50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
	to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
}
.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}

/*悬摆*/
@-webkit-keyframes swing{
	20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
	40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}
	60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
	80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
	to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
@keyframes swing{
	20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}
	40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}
	60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}
	80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}
	to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}
}
.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}

/*闪烁*/
@-webkit-keyframes flash{
	0%,50%,to{opacity:1}
	25%,75%{opacity:0}
}
@keyframes flash{
	0%,50%,to{opacity:1}
	25%,75%{opacity:0}
}
.flash{-webkit-animation-name:flash;animation-name:flash}

/*下滑*/
@-webkit-keyframes slideDown{
	0%{-webkit-transform-origin:0 0;-webkit-transform:translateY(0)}
	to{-webkit-transform-origin:0 0;-webkit-transform:translateY(100%)}
}@keyframes slideDown{
	0%{transform-origin:0 0;transform:translateY(0)}
	to{transform-origin:0 0;transform:translateY(100%)}
}
.slideDown{-webkit-animation-name:slideDown;animation-name:slideDown}

/*上滑*/
@-webkit-keyframes slideUp{
	0%{-webkit-transform-origin:0 0;-webkit-transform:translateY(0)}
	to{-webkit-transform-origin:0 0;-webkit-transform:translateY(-100%)}
}
@keyframes slideUp{
	0%{transform-origin:0 0;transform:translateY(0)}to{transform-origin:0 0;transform:translateY(-100%)}
}
.slideUp{-webkit-animation-name:slideUp;animation-name:slideUp}

/*放大抖动*/
@-webkit-keyframes tada{
	0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
	10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}
	30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}
	40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}
	to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
@keyframes tada{
	0%{-webkit-transform:scaleX(1);transform:scaleX(1)}
	10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}
	30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}
	40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}
	to{-webkit-transform:scaleX(1);transform:scaleX(1)}
}
.tada{-webkit-animation-name:tada;animation-name:tada}

/*倾斜摆动*/
@-webkit-keyframes jello{
	11.1%{-webkit-transform:none;transform:none}
	22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}
	33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}
	44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}
	55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}
	66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}
	77.7%{-webkit-transform:skewX(.39062deg) skewY(.39062deg);transform:skewX(.39062deg) skewY(.39062deg)}
	88.8%{-webkit-transform:skewX(-.19531deg) skewY(-.19531deg);transform:skewX(-.19531deg) skewY(-.19531deg)}
	to{-webkit-transform:none;transform:none}
}
@keyframes jello{
	11.1%{-webkit-transform:none;transform:none}
	22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}
	33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}
	44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}
	55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}
	66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}
	77.7%{-webkit-transform:skewX(.39062deg) skewY(.39062deg);transform:skewX(.39062deg) skewY(.39062deg)}
	88.8%{-webkit-transform:skewX(-.19531deg) skewY(-.19531deg);transform:skewX(-.19531deg) skewY(-.19531deg)}
	to{-webkit-transform:none;transform:none}
}
.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}

tips：以上仅供参考哦

12.CSS3常见动画有哪些？实现方式？
kleinBlue.的博客
11-07 795
一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： transition 实现渐变动画 transform 转变动画 animation 实现自定义动画 二、实现方式 transition 实现渐变动画 transition的属..
css3动画效果
03-13
不支持ie10以下的ie浏览器
css3动画集合
04-27
html5 css3 动画 html5 css3 动画 html5 css3 动画 html5 css3 动画
CSS3 动画效果总结
web开发自学
12-30 735
CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类：transform、transition以及animation。 transform rotate 设置元素顺时针旋转的角度，用法是： transform: rotate(x); 参数x必须是以deg结尾的角度数或0，可为负数表示反向。 ...
css3特效样式库
anda9128的博客
04-20 979
直接调用样式类即可： 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动画效果抖动解决方法
09-22
无论选择哪种方法，都需要我们对CSS动画的基础知识有一定的了解，包括如何定义动画、如何通过不同的状态控制动画播放，以及对CSS选择器和类的正确使用。在实际开发中，灵活运用这些知识点，将有助于我们制作出更加...
发现两个有趣的CSS3动画效果
09-25
在本文中，我们将深入探讨两个有趣的CSS3动画效果：CSS3绘制机器猫和纯CSS3动画。这两个效果展示了CSS3的强大潜力，不仅能够创建出视觉上吸引人的元素，还能够实现动态交互，使得网页设计更加生动有趣。 首先，让...
精选资源
20个CSS3动画实战案例开发
06-18
本套课程，大喵将手把手带着大家上手精选20个纯CSS3动画项目精选案例项目实战，让小伙伴们能够轻松上手，企业公司项目开发过程中遇到的页面动画交互效果需求实现，以及一些更加炫酷创意动画想法的实现，成为一名酷酷...
精选资源
纯css3波浪音阶动画特效
07-24
【纯CSS3波浪音阶动画特效】是一种利用HTML5的结构元素和CSS3的动画特性，创造出的视觉上极具吸引力的动态效果。这个特效主要由一系列彩色的波浪形线条组成，它们随着时间的推移呈现出起伏波动的效果，仿佛是音乐的...
精选资源
CSS3火警提示图标动画特效
07-24
【CSS3火警提示图标动画特效】是一种利用CSS3的强大功能来实现的视觉效果，它通过CSS3的animation属性创建了一种生动的火警图标，伴随着声波振动的动画，以此来模拟火警报警器的工作状态，提升用户体验，增强警示...
CSS3动画效果大全
bealei的博客
01-14 929
/* animation / .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;} .a-fadein,.a-fadeinT,.a-fadeinR...
css3的一些动画（代码及演示）
qq_43955202的博客
03-31 9086
CSS3 的一些动画（代码及演示） 1. 过渡： Transition(实现元素不同状态间的平滑过渡） 补间动画：从初始状态到终了状态。 帧动画：按固定顺序和速度播放。 属性： Transition-property：all； 所有属性均过渡 Transition-duration：1s； 设置过渡时间 Transition-timing-function:linear;设置运动曲线 （...
CSS3常用动画效果合集（最全），前端开发还会吃香吗
erthre的博客
03-31 917
* 转入 *//* 转入-从左上 *//* 转入-从左下 *//* 转入-从右上 *//* 转入-从右下*//* 转出 *//* 转出-向左上 *//* 转出-向左下 *//* 转出-向右上 *//* 转出-向右下 *//* 翻转 *//* 翻入-X轴 *//* 翻入-Y轴 *//* 翻出-X轴 *//* 翻出-Y轴 *//* 闪烁 *//* 震颤 *//* 摇摆 *//* 摇晃 *//* 震铃 *//* 淡入 *//* 淡入-从上 *//* 淡入-从右 */
CSS3的动画变形transform
weixin_49138855的博客
05-29 257
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜 动画执行前：
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 5万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
css3动画
kun_moon的博客
09-01 289
animation动画 是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; (除了名字，动画时间，延时有严格顺序要求其它随意) @keyframes 动画名称 { from{ 开始位置 } /*0%*/ to{ 结束 } /...
35个让人惊讶的 CSS3 动画效果演示
weixin_34250709的博客
11-22 356
　　本文收集了35个惊人的 CSS3 动画演示，它们将证明 CSS3 Transform 和 Transition 属性的强大能力。CSS 是网页设计非常重要的一部分，随着越来越多的浏览器对 CSS3 支持的不断完善，设计师和开发者们有了更多的选择。如今，用纯 CSS 就可以实现各种各样很酷的效果，甚至是动画。 1. Pure CSS Coke Can     2. Colorful ...
CSS动画库合集+CSS动画效果演示
sshj869的博客
08-31 3260
CSS动画库合集+CSS动画效果演示 CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。 要创建 CSS3 动画，你需要了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。 下面给大家介绍：常见CSS动画库合集+CSS动画效果演示： 一、animates.css animate.css是来自dropbox的工程师Daniel Eden开发的
CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
最新发布
逆境清醒的博客
10-19 2591
CSS3 动画相关属性实例大全（1)（@keyframes ，background属性，border 属性）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值