Transform

简单来说是一个元素的变形属性，而且不改变原来定位及相关元素，可以说是浮动于文本变化，但级别（z-index等）还是会遵守原来的级别。

作为一个属性来说，就是有唯一值的。如果你之前使这个元素向左移动了5px，如果在想让他往左移动，应该是10px而不是再写5px。后面的，新添加的style会覆盖掉原来的transform状态。意味着，你写动画的时候要十分小心，尤其是动态变换的时候，需要动态写相关的transform。当需要新增变换时，在原基础上加空格然后写变换就行。注意同名变化会覆盖。

再强调一次 在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding，真的很容易卡顿

transform-origin

用于指定元素变形的中心点。

表示2维的x-offset/y-offset可以设px值也可以设%百分比，也可设top / right / bottom / left / center等keyword。表示3维的z-offset只能设px值，不能设%百分比，也没有keyword。

可以不使用，用translate模拟出来。

perspective

指定3D的视距。默认值是none表示无3D效果，即2D扁平化。

perspective只能设px值，不能设%百分比。相当于你离屏幕的距离，元素的z轴越大，离你越近，当z轴大于这个值时，相当于大于你的视线，到你脑后，元素不可见。

借用W3C的图配合translateZ来帮助理解视距。

Transition

· transition-property: 过渡属性(默认值为all)

· transition-duration: 过渡持续时间(默认值为0s)

· transiton-timing-function: 过渡函数(默认值为ease函数)

· transition-delay: 过渡延迟时间(默认值为0s)

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法

说到transform就不得不提一下transition了。过渡transition是一个复合属性，通过四个子属性的配合完成整个过渡过程。

过渡transition的这四个子属性只有是必需值且不能为0。其中，和都是时间。当两个时间同时出现时，第一个是，第二个是；当只有一个时间时，它是，而为默认值0。可以多个规则一起写，用逗号隔开。

transition-timing-function

有linear，ease，ease-in，ease-out，ease-in-out，cubic-bezier(n,n,n,n)，steps。其实它们都是贝赛尔曲线。

linear是匀速过渡，ease是先快再慢的节奏，ease-in是加速冲刺的节奏，ease-out是减速到停止的节奏，ease-in-out是先加速后减速的节奏。自制贝塞尔曲线工具：贝塞尔魔方。

steps步进函数将过渡时间划分成大小相等的时间时隔来运行.eg:steps(3, start)

Animation

调用写好的@keyframes规则，为元素选择动画效果，执行时间，延迟时间，执行后状态。
可用transform和delay实现简化的animation，不推荐。

常规动画控制技巧

使用类名控制

常规的一般是用类名active，在active类名下写动画。元素classlist.add('active')时调用动画。动画执行时间设置setTimeout remove掉active类停止动画。这样会在高频点击时出现不连贯问题，由于用的timeout，需要注意控制状态，不能被上一次动画影响下一次动画。

优化选择

可以直接在原元素下写所有动画，设置成pause和infinite。然后单独写一个active类控制动画running和pause。有一种“无侵入”的感觉，代码层次清晰，控制关系明确。有利于后期的维护与扩展。需注意animation-play-state: paused;是最好分开写，不要简写到animate里。对于IE10/IE11浏览器不会读去animate的animation-play-state属性。

多个动画

可以在animate里用逗号隔开写。eg：animation: fadeIn 1s, float .5s 1s infinite;。

优化

提取出公用动画规则减少重复代码，避免变换冲突（就是后者动画的transform覆盖掉之前动画的transform）

无侵入定位和居中定位准则

1 这里的“无侵入定位”指不受animation影响的元素定位，包含两部分：

· 一 不使用keyframes关键帧决定初始位置。

· 二 不要使用keyframes中出现的属性定位。

2 这里的“居中定位准则”包含两部分：

· 一 元素定位在容器中间位置。

· 二 元素的定位方式为居中定位。即用left，top定位到父元素中心，然后用margin定位到原位置。

常规动画实现

1 直接全部用tranform加delay实现（不要keyframes）把图片元素切割成一个个可动小块。
2 CSS3细节强调动画，即把原图切成更小的模块，各自写infinite动画让他动起来。
3 SVG动画，主要特点，沿着运动路径运动。

svg篇幅有点多，新一篇写吧。。。ok，说了这么多概念动手吧～

先看原图

消除工作日

操作步骤（看起来）分成三个步骤

· 框选项目

· 拖动，删除

· 扩张一个白块

界面

先画出整个界面雏形。整个界面分成，白块儿，灰块儿背景，垃圾桶，红色提示，框选拦。方块一开始用的是flex布局，但发现要变动长度之类的不好操作，就换成了absolute,用id乘长度可以动态定位。用chrome的控制台的css随便一个颜色选项对原图去色，大概作出大小和形状。至于垃圾桶动画，我上网随便找了个icon，用ps分成帽子和身子，做了个动画就凑合了（他那个没找到。。画不好很尴尬）。。cursor的话。。。懒得做。。。。。

逻辑设计

由于只是一张图片，我就按我的理解来做了。

· 点击拖动出现出现框选，选中active变色

· 点击active对象可以拖动

· 有空缺的地方时，直接单击白块儿拖动可以左右增减白块儿宽度

· 拖动到垃圾桶位置时，垃圾桶出现动画，删去框选白块儿并出现提示

图中大概就是这些功能，我自己想的附加功能

· 点击垃圾桶返回所有删去白块

· 拖动单个变形模块时，模块变回原形

ok，大概就这么多了然后就实现了。

不足和优化

client,offset,layer,page

client相对于整个浏览器界面可视区域的位置
page相对于整个文档开头的位置不随滑动条移动而变化。IE没有该属性。解决办法：PageY=clientY+scrollTop-clientTop; 
layer相对于相对于最近祖先定位的位置。
offset相对于最近的祖先定位元素

ps:
1 offsetX和layerX都是以border为参考点
2 只有clientX和screenX 皆大欢喜是W3C标准.
3 chrome和safari一条龙通杀

写框选的时候因为这个头疼的不行。。网上资料好杂，赶紧记下来。我是通过查询父元素left等值计算了。。尴尬的一批

vue和@keyframes

由于不想违背尽量少使用transform改变top,left,width等属性避免卡顿的原则。坚持用translateX等来写拖动，到了删除的动画时，整个人都呆了。因为是要在当前位置缩小进入垃圾桶，然后变换的x，y都是动态的，直接写keyframes会覆盖掉变换的位置。但是！但是！我想写动态keyframes时，翻了半天vue文档愣是没发现:style里面怎么写@keyframes，格式和关键字冲突。最后是用transform写了个简易动画，这个很不舒服。。

查询元素

细节操作元素时，还是直接用的js原生。。实在是不知道怎么优雅的操作数据驱动（yyx大佬对不起。。）做款选时，我需要知道白块儿的具体位置，这个直接用数据绑定的话，没想出逻辑应该怎么写，因为一开始白块儿都是用flex写死的，愣是没找到获取渲染位置的api，这很不优雅的感觉。

高频触发

拖动删除和点击还原时，都会出现字样和动画。然而动画和字样是有1s时间的。如果设置remove的话，有可能会和下一个动画出现矛盾冲突。目前解决的办法是，用两个警告模版交替，做到2次/1s的兼容，垃圾桶动画的话，只能保证运行时不会被之前的settimeout关掉，还是没有更好的办法，可能这是逻辑设计的问题吧

好了，CSS3动画制作为大家简单介绍这些，想要了解更多HTML5/CSS3内容的小伙伴可以关注职坐标HTML5/CSS3频道！