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

收藏邀请

/*向左移动并弹性显示*/
@-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人参与评论

请发表评论

全部评论

萱萱

本文作者 2018-10-18 11:03

粉丝0 阅读1672 回复0

淘宝店铺关键词如何设置能增加权重？选词技巧经验分享发布时间：2018-10-15

电商设计师收藏这个导航就够了,汇聚国内外电商设计师素材/字体/图库/UI网址导航大全 ...发布时间：2018-10-19

阅读排行榜

1 阿里巴巴国际站在线布局工具|一个模块添加

阿里巴巴国际站可视化模块在线自由布局工具是疯狂的美工专为阿里巴巴国际站店铺打造的

阅读：67356|2024-10-13

2 电商美工设计师必备技能:除了要会设计排版,

电商设计师详情页设计时文字怎么写更好?电商美工设计师看过来，你除了要会设计图片，

阅读：21|2024-04-20

3 广告图形设计之线的魅力,提升视觉魅力及柔

在广告设计中,文字不仅是必要的设计元素,有时还可以转化为图形进行兼具图形的角色。线

阅读：61|2024-04-14

4 天猫健康发布“新品跃爆计划”,重金打造100

4月11日，天猫健康发布“新品跃爆计划”，宣布将投入数千万元级别的资金与专属团队，

阅读：86|2024-04-14

5 2024年淘宝直播如何在竞争市场获得更高速的

时间已经来到了2024年，也是淘宝直播的第9个年头了。关键词：直播/淘宝店铺适用行业：

阅读：80|2024-04-14

6 做淘系店铺搜索流量的重要性,摸透搜索机制

现在各大电商人都是多平台矩阵运营，不管做哪个平台都有人觉得好做，也有人觉得不好做

阅读：119|2024-04-13

7 电商内容营销未来进入短视频+长内容输出模

随着短视频的崛起,电商营销方式一直在变，财富分配也随之发生翻天覆地的变化，今天来

阅读：76|2024-04-13

8 天猫拟对《天猫商品价格管理规则》作出优化

各位亲爱的商家：为了持续提升天猫买家在天猫营销活动中的价格体验，天猫拟对《天猫商

阅读：105|2024-04-06

9 千牛旺旺3分钟人工响应率指标提升,功能配置

电商卖家看过来，千牛app旺旺3分钟人工响应率指标提升功能配置流程来了，不会设置的一

阅读：107|2024-04-06

10 B站入门级投放教程:在移动端进行自助投放,

2023年，B站在商业变现方面最大的增量变化，来自于广告。从B站公布的数据来看，2023年

阅读：101|2024-04-06

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

请发表评论

全部评论

上一篇：

下一篇：

阅读排行榜

装修工具

资源下载

推荐版块

关于我们

平台简介