淘宝天猫VIP

阿里国内站VIP

阿里国际站VIP

京东平台VIP

疯狂插件VIP

全站通VIP

当前位置: 首页 经验分享/新闻资讯 干货分享

前端开发常用css css3动画代码整理集合,快收藏自己用

收藏 邀请
前端开发常用css动画代码(自己收藏用)
/*向左移动并弹性显示*/
@-webkit-keyframes fadeToLeftTan{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	70%{ -webkit-transform:translateX(-5%); opacity:1;}
	80%{ -webkit-transform:translateX(2%); opacity:1;}
	90%{ -webkit-transform:translateX(-2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToLeftTan{
	0%{ transform:translateX(100%); opacity:0;}
	70%{ transform:translateX(-5%); opacity:1;}
	80%{ transform:translateX(2%); opacity:1;}
	90%{ transform:translateX(-2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向右移动并弹性显示*/
@-webkit-keyframes fadeToRightTan{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	70%{ -webkit-transform:translateX(5%); opacity:1;}
	80%{ -webkit-transform:translateX(-2%); opacity:1;}
	90%{ -webkit-transform:translateX(2%); opacity:1;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToRightTan{
	0%{ transform:translateX(-100%); opacity:0;}
	70%{ transform:translateX(5%); opacity:1;}
	80%{ transform:translateX(-2%); opacity:1;}
	90%{ transform:translateX(2%); opacity:1;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向上移动并弹性显示*/
@-webkit-keyframes fadeToTopTan{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	70%{ -webkit-transform:translateY(-5%); opacity:1;}
	80%{ -webkit-transform:translateY(2%); opacity:1;}
	90%{ -webkit-transform:translateY(-2%); opacity:1;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTopTan{
	0%{ transform:translateY(100%); opacity:0;}
	70%{ transform:translateY(-5%); opacity:1;}
	80%{ transform:translateY(2%); opacity:1;}
	90%{ transform:translateY(-2%); opacity:1;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下移动并弹性显示*/
@-webkit-keyframes fadeToDownTan{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	70%{ -webkit-transform:translateY(5%); opacity:1;}
	80%{ -webkit-transform:translateY(-2%); opacity:1;}
	90%{ -webkit-transform:translateY(2%); opacity:1;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDownTan{
	0%{ transform:translateY(-100%); opacity:0;}
	70%{ transform:translateY(5%); opacity:1;}
	80%{ transform:translateY(-2%); opacity:1;}
	90%{ transform:translateY(2%); opacity:1;}
	100%{ transform:translateY(0); opacity:1;}
}
/*从大向小变化弹性显示*/
@-webkit-keyframes fadeInMaxToMinTan{
	0%{ -webkit-transform:scale(2); opacity:0;}
	70%{ -webkit-transform:scale(.9); opacity:1;}
	85%{ -webkit-transform:scale(1.1); opacity:1;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMaxToMinTan{
	0%{ transform:scale(2); opacity:0;}
	70%{ transform:scale(.9); opacity:1;}
	85%{ transform:scale(1.1); opacity:1;}
	100%{ transform:scale(1); opacity:1;}
}
/*从小向大变化弹性显示*/
@-webkit-keyframes fadeInMinToMaxTan{
	0%{ -webkit-transform:scale(0); opacity:0;}
	70%{ -webkit-transform:scale(1.1); opacity:1;}
	85%{ -webkit-transform:scale(.9); opacity:1;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMinToMaxTan{
	0%{ transform:scale(0); opacity:0;}
	70%{ transform:scale(1.1); opacity:1;}
	85%{ transform:scale(.9); opacity:1;}
	100%{ transform:scale(1); opacity:1;}
}
 
/**********************************/
 
/*向左移动显示*/
@-webkit-keyframes fadeToLeft{
	0%{ -webkit-transform:translateX(100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToLeft{
	0%{ transform:translateX(100%); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向右移动显示*/
@-webkit-keyframes fadeToRight{
	0%{ -webkit-transform:translateX(-100%); opacity:0;}
	100%{ -webkit-transform:translateX(0); opacity:1;}
}
@keyframes fadeToRight{
	0%{ transform:translateX(-100%); opacity:0;}
	100%{ transform:translateX(0); opacity:1;}
}
/*向上移动显示*/
@-webkit-keyframes fadeToTop{
	0%{ -webkit-transform:translateY(100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTop{
	0%{ transform:translateY(100%); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向上60移动显示*/
@-webkit-keyframes fadeToTop60{
	0%{ -webkit-transform:translateY(60px); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToTop60{
	0%{ transform:translateY(60px); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下移动显示*/
@-webkit-keyframes fadeToDown{
	0%{ -webkit-transform:translateY(-100%); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDown{
	0%{ transform:translateY(-100%); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
/*向下60移动显示*/
@-webkit-keyframes fadeToDown60{
	0%{ -webkit-transform:translateY(-60px); opacity:0;}
	100%{ -webkit-transform:translateY(0); opacity:1;}
}
@keyframes fadeToDown60{
	0%{ transform:translateY(-60px); opacity:0;}
	100%{ transform:translateY(0); opacity:1;}
}
 
/**********************************/
 
/*上下微移漂浮*/
@-webkit-keyframes flashTopDown{
	0%{ -webkit-transform:translateY(0); opacity:1;}
	100%{ -webkit-transform:translateY(8px); opacity:.8;}
}
@keyframes flashTopDown{
	0%{ transform:translateY(0); opacity:1;}
	100%{ transform:translateY(8px); opacity:.8;}
}
 
/**********************************/
 
/*从大向小变化显示*/
@-webkit-keyframes fadeInMaxToMin{
	0%{ -webkit-transform:scale(2); opacity:0;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMaxToMin{
	0%{ transform:scale(2); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}
/*从小向大变化显示*/
@-webkit-keyframes fadeInMinToMax{
	0%{ -webkit-transform:scale(0); opacity:0;}
	100%{ -webkit-transform:scale(1); opacity:1;}
}
@keyframes fadeInMinToMax{
	0%{ transform:scale(0); opacity:0;}
	100%{ transform:scale(1); opacity:1;}
}
 
/**********************************/
 
/*大小闪动变化 变小*/
@-webkit-keyframes flashMaxMin{
	0%{ -webkit-transform:scale(1);}
	100%{ -webkit-transform:scale(.98);}
}
@keyframes flashMaxMin{
	0%{ transform:scale(1);}
	100%{ transform:scale(.98);}
}
/*大小闪动变化变大*/
@-webkit-keyframes flashMax{
 0%{ -webkit-transform:scale(1);}
 100%{ -webkit-transform:scale(1.05);}
} 
@keyframes flashMax{
 0%{ transform:scale(1);}
 100%{ transform:scale(1.05);}
}
 
/**********************************/
 
/*渐显*/
@-webkit-keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes fadeIn{
	0%{ opacity:0;}
	100%{ opacity:1;}
}
/*渐隐*/
@-webkit-keyframes fadeOut{
	0%{ opacity:1;}
	100%{ opacity:0;}
}
@keyframes fadeOut{
	0%{ opacity:1;}
	100%{ opacity:0;}
}
以上纯属为友情分享,希望对你有所帮助哟~

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

阅读排行榜

关注官方微信

开放QQ群

美工5群:1061710658

美工3群:199**044(满

极限词群:951970623

平台简介

六年疯狂 初心不变:从2013年至今我们一直在研究和探索电商设计师所面临的难题最佳解决方案,我们致力打造一款更好用,更实用电商设计师辅助工具,疯狂六年只为做好一件事,以开放共享共赢的心态,更好的服务于广大电商设计师。
by:疯狂的美工电商设计师学习交流平台

手机版- 疯狂的美工 |网站地图

赣公网安备 36070202000375号

ICP证(电信增值许可证):赣B2-20220105

Powered by Fkdmg.Com © 2013-2022    赣ICP备18006944号-1