手把手教你写css3通用动画
之前接了几个微信里的项目，类似电子邀请函，什么分析报告这样的项目， 对css3动画要求十分高，每个页面客户几乎都有天马行空的想法，或者说设计师有这样的想法。
众所周知css3里的keyframe写好了就不能赋值复用的， 所以怎样能把keyframe通用起来就异常关键了。
好，下面先上几个之前写的项目：（今天sae挂了 ，只好用别人的生产地址），手机打开或者chrome模拟看哦！
http://www.51qianlima.cn/bim/
http://wx.mgcc.com.cn/fotile/invite/index.html?leader=2&from=timeline&isappinstalled=0
仔细看你就发现页面的动画有渐显，有飞入，而且可能2者或多者同时存在。
那么问题来了：是不是每个页面的keyframe都得单独写？
在说这个问题之前，你可能得掌握几种常用的水平居中，垂直居中，中心居中；水平偏移，垂直偏移的写法（以下demo效果请chrome模拟手机端打开，-webkit内核哦）。
demo1：postion结合margin:auto
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
background:lightblue;
}
.demo-1 {
position: absolute;
margin:0 auto;
left:0;
right:0;
}
.demo-2 {
position: absolute;
margin:auto 0;
top:0;
bottom:0;
}
.demo-3 {
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
</head>
<body>
<div class="demo demo-1">水平居中</div>
<div class="demo demo-2">垂直居中</div>
<div class="demo demo-3">中心居中</div>
</body>
</html>
demo2：postion和translate 一起使用达到水平、垂直居中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
background:peachpuff;
}
.demo-1 {
position: absolute;
left:50%;
-webkit-transform:translateX(-50%);
}
.demo-2 {
position: absolute;
top:50%;
-webkit-transform:translateY(-50%);
}
.demo-3 {
position: absolute;
top:50%;
left:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div class="demo demo-1">水平居中</div>
<div class="demo demo-2">垂直居中</div>
<div class="demo demo-3">中心居中</div>
</body>
</html>
好 掌握了以上2个demo的写法和区别后，正在的项目上 ，往往用到的是根据水平中心点，或者垂直中心点偏移的写法，因为手机屏幕大小不一，所以这个写法异常常用。
demo3：中心点偏移
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
background:lightblue;
}
.demo-1 {
position: absolute;
margin: 0 auto;
left: -88px;
right: 0;
}
.demo-2 {
position: absolute;
margin: auto 0;
top: -30px;
bottom: 0;
} body:before {
content: '';
width: 100%;
border-bottom: 2px dotted blue;
position: absolute;
top: 50%;
-webkit-transform: translateY(-2px);
} body:after {
content: '';
height: 100%;
border-left: 2px dotted blue;
position: absolute;
left: 50%;
-webkit-transform: translateX(2px);
} </style>
</head>
<body> <div class="demo demo-1">水平 距离偏移</div>
<div class="demo demo-2">垂直 距离偏移</div> </body>
</html>
行 掌握后接下来可以为写通用动画作铺垫了（主要是飞入效果）
如果单纯渐显的话，咱们只需要控制opacity 就可以达到了：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
background:lightblue;
opacity: 0;
}
.demo-1 {
position: absolute;
margin:0 auto;
left:0;
right:0;
-webkit-animation:.8s ease opacity_kf 0s forwards;
}
.demo-2 {
position: absolute;
margin:auto 0;
top:0;
bottom:0;
-webkit-animation:.8s ease opacity_kf .8s forwards;
}
.demo-3 {
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
-webkit-animation:.8s ease opacity_kf 1.6s forwards;
} @-webkit-keyframes opacity_kf {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="demo demo-1">水平居中</div>
<div class="demo demo-2">垂直居中</div>
<div class="demo demo-3">中心居中</div>
</body>
</html>
扯了这么多 ，主角来了，就是飞入也分2种写法，一种就是每个飞入效果是一个width:100%;height:100%;的层，然后操作是整个层translate，XY；但是这样写有一个很不方便就是审查元素的时候，放大镜只能定位到一个层上（多个飞入动画，别的层就给盖住了）
demo如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
background:lightblue;
}
.demo-1 {
position: absolute;
margin:0 auto;
left:0;
right:0;
}
.demo-2 {
position: absolute;
margin:auto 0;
top:0;
bottom:0; }
.demo-3 {
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
} @-webkit-keyframes translate_kf {
0% {
-webkit-transform:translateX(100%);
}
100% {
-webkit-transform:translateX(0);
}
} .demo-1-ani {
-webkit-animation:.8s ease translate_kf 0s forwards;
}
.demo-2-ani {
-webkit-animation:.8s ease translate_kf .8s forwards;
}
.demo-3-ani {
-webkit-animation:.8s ease translate_kf 1.6s forwards;
} .translate-wrap {
width:100%;
height:100%;
-webkit-transform:translateX(100%);
position:absolute;
}
</style>
</head>
<body>
<div class="translate-wrap demo-1-ani">
<div class="demo demo-1">水平居中</div>
</div>
<div class="translate-wrap demo-2-ani">
<div class="demo demo-2">垂直居中</div>
</div>
<div class="translate-wrap demo-3-ani">
<div class="demo demo-3">中心居中</div>
</div> </body>
</html>
但是如果换一个写法，就是translate的包裹器里面的节点top和left都写了定值，那么外面动画的包裹器其实是不占文档流的
然后我们只需要操作这个不占文档流的容器就可以了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<title></title>
<style>
* {
padding:0;
margin:0;
}
html,body {
height:100%;
}
.demo {
width:100px;
height: 100px;
text-align: center;
line-height: 100px;
background:lightblue;
}
.demo-1 {
position: absolute;
left:0;
right:0;
}
.demo-2 {
position: absolute;
top:150px; }
.demo-3 {
position: absolute;
top:300px;
left:100px;
} @-webkit-keyframes translate_kf {
0% {
-webkit-transform:translateX(100%);
}
100% {
-webkit-transform:translateX(0);
}
} .demo-1-ani {
-webkit-animation:.8s ease translate_kf 0s forwards;
}
.demo-2-ani {
-webkit-animation:.8s ease translate_kf .8s forwards;
}
.demo-3-ani {
-webkit-animation:.8s ease translate_kf 1.6s forwards;
} .translate-wrap {
width:100%;
-webkit-transform:translateX(100%);
position:absolute;
}
</style>
</head>
<body>
<div class="translate-wrap demo-1-ani">
<div class="demo demo-1">水平居中</div>
</div>
<div class="translate-wrap demo-2-ani">
<div class="demo demo-2">垂直居中</div>
</div>
<div class="translate-wrap demo-3-ani">
<div class="demo demo-3">中心居中</div>
</div> </body>
</html>
最后提一点 如果同时用到渐显和飞入，只需要设置好几个间隔一致的class就能很简单的混合使用了，例如有10个控制渐显的动画，和5个控制飞入的动画
.word_1 {
opacity:;
-webkit-animation:.8s ease word_1_kf .5s forwards;
}
.word_2 {
opacity:;
-webkit-animation:.8s ease word_1_kf 1.3s forwards;
}
.word_3 {
opacity:;
-webkit-animation:.8s ease word_1_kf 2.1s forwards;
}
.word_4 {
opacity:;
-webkit-animation:.8s ease word_1_kf 2.9s forwards;
}
.word_5 {
opacity:;
-webkit-animation:.8s ease word_1_kf 3.7s forwards;
}
.word_6 {
opacity:;
-webkit-animation:.8s ease word_1_kf 4.5s forwards;
}
.word_7 {
opacity:;
-webkit-animation:.8s ease word_1_kf 5.3s forwards;
}
.word_8 {
opacity:;
-webkit-animation:.8s ease word_1_kf 6.1s forwards;
}
.word_9 {
opacity:;
-webkit-animation:.8s ease word_1_kf 6.9s forwards;
}
.word_10 {
opacity:;
-webkit-animation:.8s ease word_1_kf 7.7s forwards;
}
/********************** 左边动画 start ********************************/
.translateX_animation_left_1 {
-webkit-transform: translateX(-100%);
-webkit-animation: .8s ease translateX_1_left_kf forwards .5s;
}
.translateX_animation_left_2 {
-webkit-transform: translateX(-100%);
-webkit-animation: .8s ease translateX_1_left_kf forwards 1.3s;
}
.translateX_animation_left_3 {
-webkit-transform: translateX(-100%);
-webkit-animation: .8s ease translateX_1_left_kf forwards 2.1s;
}
@-webkit-keyframes translateX_1_left_kf {
0% {
-webkit-transform: translateX(-100%);
}
100% {
-webkit-transform: translateX(0);
}
}
/********************** 左边动画 end ********************************/
/********************** 右边动画 start ********************************/
.translateX_animation_right_1 {
-webkit-transform: translateX(-100%);
-webkit-animation: .8s ease translateX_1_right_kf .5 forwards;
}
.translateX_animation_right_2 {
-webkit-transform: translateX(100%);
-webkit-animation: .8s ease translateX_1_right_kf forwards 1.3s;
}
.translateX_animation_right_3 {
-webkit-transform: translateX(100%);
-webkit-animation: .8s ease translateX_1_right_kf forwards 2.1s;
}
.translateX_animation_right_4 {
-webkit-transform: translateX(100%);
-webkit-animation: .8s ease translateX_1_right_kf forwards 2.9s;
}
.translateX_animation_right_5 {
-webkit-transform: translateX(100%);
-webkit-animation: .8s ease translateX_1_right_kf forwards 3.7s;
}
@-webkit-keyframes translateX_1_right_kf {
0% {
-webkit-transform: translateX(100%);
}
100% {
-webkit-transform: translateX(0);
}
}
/********************** 右边动画 end ********************************/
word_1后可以随意执行 translateX_animation_right_2 或者 translateX_animation_left_2 ，然后word_3神马的。
好，暂时遇到的项目只用到了渐显和飞入，这2个常用的通用动画，小伙伴们有更多的实际场景欢迎交流，写得不好的地方也欢迎吐槽，谢谢看完 谢谢谢谢。
手把手教你写css3通用动画的更多相关文章
- skyweaver 手把手教你写css3通用动画
之前接了几个微信里的项目,类似电子邀请函,什么分析报告这样的项目, 对css3动画要求十分高,每个页面客户几乎都有天马行空的想法,或者说设计师有这样的想法.众所周知css3里的keyframe写好了就 ...
- 手把手教你写Sublime中的Snippet
手把手教你写Sublime中的Snippet Sublime Text号称最性感的编辑器, 并且越来越多人使用, 美观, 高效 关于如何使用Sublime text可以参考我的另一篇文章, 相信你会喜 ...
- 看过《大湿教我写.net通用权限框架(1)之菜单导航篇》之后发生的事（续）——主界面
引言 在UML系列学习中的小插曲:看过<大湿教我写.net通用权限框架(1)之菜单导航篇>之后发生的事 在上篇中只拿登录界面练练手,不把主界面抠出来,实在难受,严重的强迫症啊.之前一直在总 ...
- 手把手教你写LKM rookit! 之 第一个lkm程序及模块隐藏（一）
唉,一开始在纠结起个什么名字,感觉名字常常的很装逼,于是起了个这<手把手教你写LKM rookit> 我觉得: 你们觉得:...... 开始之前,我们先来理解一句话:一切的操作都是系统调用 ...
- 手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取
版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 看完两篇,相信大家已经从开始的 ...
- 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. 系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 ...
- 只有20行Javascript代码！手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
- [原创]手把手教你写网络爬虫（4）：Scrapy入门
手把手教你写网络爬虫(4) 作者:拓海 摘要:从零开始写爬虫,初学者的速成指南! 封面: 上期我们理性的分析了为什么要学习Scrapy,理由只有一个,那就是免费,一分钱都不用花! 咦?怎么有人扔西红柿 ...
- [原创]手把手教你写网络爬虫（5）：PhantomJS实战
手把手教你写网络爬虫(5) 作者:拓海 摘要:从零开始写爬虫,初学者的速成指南! 封面: 大家好!从今天开始,我要与大家一起打造一个属于我们自己的分布式爬虫平台,同时也会对涉及到的技术进行详细介绍.大 ...
随机推荐
- HDU 6214 最小割边
双倍经验题:HDU 6214,3987 求最小割的最小边. 方案一: 首先跑最大流,这个时候割上都满载了,于是将满载的边 cap = 1,其他 inf ,再跑最大流,这个时候限定这个网络的关键边就是那 ...
- ueditor图片上传,网络连接错误的解决方案
错误产生的原因是ueditor/net目录中的Uploader.cs在网站发布之后就没有了,重新上传这个文件,问题就解决了
- JavaScript 经典实例日常收集整理(常用经典)
作者:阿讯小飞 原文来自:脚本之家 跨浏览器添加事件 //跨浏览器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj. ...
- 【luogu P3950 部落冲突】 题解
题目连接:https://www.luogu.org/problemnew/show/P3950 1.像我这种学数据结构学傻了的 2.边权化点权 所有点权初始化0 3.对于战争 将深度较深的-1,对于 ...
- linux学习(一)开始
第一关 用u盘安装ubuntu, 大部份工作制作的安装U盘会失败,使用Win32DiskImager就行了,这个工具需要手动填写完整iso路径. 第二个问题 装完后发现乱码,连英文都乱码,不知道原因, ...
- Selenium处理页面---弹窗、表格、鼠标悬停、frame、下拉框、上传文件
一.Selenium测试-常用页面处理 1.概述 UI自动化测试(GUI界面层):UI层是用户使用产品的入口,所有功能通过这一层提供给用户,测试工作大多集中在这一层,常见的测试工具有UFT.Robot ...
- SpringBoot非官方教程 | 第十四篇：在springboot中用redis实现消息队列
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot14-redis-mq/ 本文出自方志朋的博客 这 ...
- Python基础—08-函数使用（02）
函数使用 生成器 使用场景: 在使用列表时,很多时候我们都不会一下子使用全部的数据,通常都是一个一个使用,但是数据量较小的时候,对于内存的占用可以不用过于关心:但是当数据量较大时,就会出现内存使用突然 ...
- MySQL数据库操作基础
.MySQL 是什么? )软件(Software):工具(解决问题) )数据库管理系统(DBMS) )关系型(Relation)数据库管理系统(RDBMS):类似Oracle 扩展:db-engine ...
- 配置隐私协议 - iOS
根据苹果隐私协议新规的推出,要求所有应用包含隐私保护协议,故为此在 App 中添加了如下隐私协议模块. 首次安装 App 的情况下默认调用隐私协议模块展示相关信息一次,当用户点击同意按钮后,从此不再执 ...