自己写的几个常用css动画（自己收藏用）

其他 2018-06-08 17:27:38 阅读次数: 2 
/*向左移动并弹性显示*/
@-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;}
}

压缩后：

@-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}}@-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}}@-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}}

猜你喜欢

转载自blog.csdn.net/qq_16494241/article/details/79174806
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
返回指定时间格式
fopen函数中的mode参数
Java 单例模式探讨
Flex remoteobject工作原理探讨
寻找mplayer的便捷安装方法
30天了解30种技术系列---(26)MySQL自动化运维工具Inception
关于Jboss/Tomcat/Jetty的JNDI定义123
程序减肥，strip，eu-strip 及其符号表
AsyncTask、View.post(Runnable)、ViewTreeObserver三种方式总结frame animation自动启动
Json和Bean的互相转换
每日归档
更多
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022