今天就跟大家聊聊有关html5+css3动画如何在webapp中应用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
为房县等地区用户提供了全套网页设计制作服务，及房县网站建设行业解决方案。主营业务为网站设计制作、
做网站、房县网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
动画在webapp的现状
webapp模式的网站追求的就是一个体验，是HTML5&CSS3浪潮下的产物，抛开体验不说，webapp模式门槛比较高；
而体验优化的一个重点便是动画，可以说动画是webapp的一个亮点。但也是一个难点，一个痛点，主要原因是：移动端手机的碎片化严重。
设备、型号、版本、分辨率等差异导致移动端需要考虑的主流情况达10多种，而Hybrid带来的webview可以让情况更加糟糕
所以说，近两年想在移动端大范围的使用动画，或者使用webapp模式都对团队的能力提出了要求，原因是：
① 单页对变量污染更加敏感
这个变量污染包括js变量污染，css变量污染，虽然js可采用AMD模块消除主要问题，但css的污染却很难避免，有时候更甚于js
web Component是一个解决方案，但还不敢大范围使用，因为一次UI的改变会导致各个业务团队改变，这个代价没有颠覆性的优势，得不偿失。
② heap值攀升
如果view的管理没有一个有效的销毁机制，那么webapp模式的网站不可避免的会消耗更多的内存，甚至降低体验，费力不讨好
③ 手机烂，CPU烂，国产浏览器多而烂，私自调整webkit内核而引发的问题比比皆是，奇葩浏览器什么的就不提了
所以动画在webapp或者说在移动端的使用有其场景，他适用于小范围的动画，适用于view内级别的动画，比如弹出层的动画，细节处的动画
不适用于页面级别的切换，比如整个view的切换（我们看到的native中的过场动画），view级别动画的痛点是：手机碎片化
而view级别动画的难点是：
① view级别的动画不能预料dom树的大小，大dom树的动画cpu吃不消
② 过场动画不能共用window.scollTop，各个View需要维护自己的滚动条，而区域滚动是移动端另一个痛点
以上是移动端的现状，技术虽好，有其场景。可以在高端机上使用全局性的动画，但是框架层面一定要提供开关机制，低端机卡帧经常发生，保证低端机的基本功能
接下来介绍一下CSS3的动画......
CSS3的动画
transition
代码如下:
PS：当然，上面四个属性可以像border一样写到一堆
代码如下:
.demo {
transition: border 2s ease 2s;
}这段代码就是告诉浏览器每当border发生变化时，请在两秒后触发，并且在两秒内完成
这里举一个典型的小例子做说明：
代码如下:
Blade Demo
* { margin: 0 0; padding: 0 0; }
h2 { font-size: 16px; font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;}
.cm-header { top: 0; height: 44px; line-height: 44px; text-align: center; background-color: #099fde; color: #fff; z-index: 960; }
.title::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; display: inline-block; margin-left: 5px; vertical-align: middle; position: relative; top: -4px; -webkit-transition: all 0.3s ease-in-out; }
.up::after { -webkit-transform: rotate(135deg); top: 1px; }
.down::after { -webkit-transform: rotate(-45deg); top: -4px; }
点击我
var el = $('#title');
el.on('click', function () {
if (el.hasClass('up')) {
el.removeClass('up');
el.addClass('down');
} else if (el.hasClass('down')) {
el.removeClass('down');
el.addClass('up');
}
});
简单的动画使用transition，复杂的动画便要使用animation了；或者说需要从一个状态到另一个状态的话，好使用animation
代码如下:
animation
animation-name 对于keyframe的名称
animation-duration 动画花费时间
animation-timing-function 动画曲线
animation-delay 延迟多少毫秒a执行
animation-iteration-count 执行次数
animation-direction 是否反方向播放
我们一般使用前四个参数，这里的使用需要先创建keyframe规则，这里先来一个简单的例子：
代码如下:
Blade Demo @-webkit-keyframes demoFrame { from { left: 0; } to { left: 100px; } } div { width: 100px; top: 100px; height: 100px; background: gray; position: absolute; } .demo { -webkit-animation: demoFrame 1s ; }
