前端开发常用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 阅读1900 回复0

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

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

阅读排行榜

1 如何提高海外玩家的游戏付费率?这八个方法

现在的年累人压力过大，在闲暇之时偶尔玩玩游戏也是不错的选择。关于如何提高海外玩家

阅读：18|2024-11-24

2 微信生态新机遇:2025微信小店商家+多场景公

至从抖音开始卷后，不少播主及商家转战微信，运营微信视频号，通过微信小店变现，那么

阅读：19|2024-11-24

3 PS教程之CMYK颜色的运用,操作技巧及应用领

PS里的CMYK颜色什么情况下会使用到?CMYK颜色应用领域和场景是怎么样？有相关疑问的亲

阅读：16|2024-11-24

4 阿里1688店铺曝光展现量一直不超过500?来看

阿里1688店铺每天基础流量都很低怎么办？阿里巴巴展现量一直不超过500有什么办法拯救

阅读：37|2024-11-23

5 2025马上到,关于电商直播6个问题灵魂拷问,

2025马上到来,你是否对未来存在迷茫没方向呢？特别是现在大环境不好，身边项目越来越

阅读：57|2024-11-21

6 淘宝平台为降低卖家管理评价成本,淘宝网针

淘宝平台为降低卖家管理评价成本,淘宝网针对回评机制做优化啦，简真是商家福音，商家

阅读：102|2024-11-20

7 关于京东退货流程及时效一文带你了解,退货

关于京东商家退货流程及时效解读，有相关疑问的亲们进来看看了，京东退要多久 (How Lo

阅读：128|2024-11-20

8 AI自定义快捷键及常见组件快捷键使用技巧,

AI快捷键大全整理，设计们快来收藏，Adobe Illustrator 矢量图形处理工具，简称Ai，是

阅读：81|2024-11-18

9 京东双11京准通助力商家大促爆发增长,一起

京东平台双11创新高，其中京准通助力商家大促爆发增长，快一起来看看具体内容吧。不管

阅读：160|2024-11-13

10 为何每届双11天猫榜单都是品牌必争之地?上

为何每届双11天猫榜单都是品牌必争之地?，今天一文给大家解析，品牌上天猫超级必买榜

阅读：169|2024-11-12

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

请发表评论

全部评论

上一篇：

下一篇：

阅读排行榜

装修工具

资源下载

推荐版块

关于我们

平台简介