动画
偶然间发现一个软件Adobe Edge Animate 以为发现宝了，后来尝试了一天，发现没什么卵用；
总结下c3动画：
2d:
》1、过渡：
ele { transition: xxx 2s; } 其实transition: xxx 2s;也可以写在下面的hover中也可以生效；
期中xxx可以是color、width、transform等等
ele:hover{ 可以写普通属性(1);或2d的转换(2),或3d的属性(3)} eg: ele:hover{ transform: translateX(-10px);}
(1)普通属性: width;height;等
(2)2d的转换:
- translate();translateX;translateY。eg:translateX(-10px); translate(50px,100px)等
- rotate()
- scale()
- skew()
- matrix() //矩阵；这个应该不是2d变3d的转换公式，只不过是另一种实现动画的方式；
必要时要加上兼容
-webkit-transform: translateX(-10px);
-moz-transform:translateX(-10px);
-ms-transform: translateX(-10px);
-o-transform: translateX(-10px);
按需加上延迟：
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
还有其它的一些属性：transition-duration、transition-property、transition-timing-function具体待看w3c
还有加上兼容h5标签：
<script type="text/javascript" src="html5shiv.js"></script>
最后来一个例子：
<div class="effect5">
<img src="img/pic5.jpg" alt="">
<h2>旋转飞入</h2>
<p>通过旋转和位移</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<div></div>
</div>
*{margin: 0px;padding: 0px;}
html,body{height: 100%}
div{
width: 33%;
height: 365px;
overflow: hidden;
box-sizing:border-box;
float: left;
position: relative;
}
img {
height: 100%;
transition: all 1s;
}
ul{list-style: none;}
div:hover img{
opacity: 0.5;
filter: alpha(opacity=50);
transform: translateX(-10px);
-webkit-transform: translateX(-10px);
-moz-transform:translateX(-10px);
-ms-transform: translateX(-10px);
-o-transform: translateX(-10px);
}
h2,p,li,div{
position: absolute;
transition: all 0.5s;
color: #fff;
}
》2、动画：
ele { animation: ani_name 5s; }
@keyframes ani_name { from { xxx: xxx;} to {xxx: xxx;} }
也可以用百分比
@keyframes ani_name { 0% {xxx: xxx;;} 25% {xxx: xxx;;} 50% {xxx: xxx;;} 100% {xxx: xxx;;} }
必要是加媒体查询
.ele {
width: 80%;
max-width: 700px;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
必要是加兼容：
@-webkit-keyframes ani_name ｛｝
还有animation后的一堆参数：
animation-name、animation-duration、animation-timing-function、animation-delay等；参考w3c
3d:
以3d骰子为例：
舞台:{perspective:1000px;} //这个似乎没什么用
人物：
#d2{ position: relative;transform-style:preserve-3d;-webkit-transition: all 60s ease-in-out;-moz-transition: all 60s ease-in-out;} 或者说是核心，其它部分以它为参考；
#d2:hover{transform: rotateX(360000deg) rotateY(360000deg) rotateZ(360000deg);}
transform-style:preserve-3d;这个才使他看起来像是3d的；
以广告幅为例：
舞台:{perspective: 800px; perspective-origin: right;} //这个似乎没什么用
人物：
#d2{position: relative;transform-origin: center center -180px;transform-style: preserve-3d;} 或者说是核心，其它部分以它为参考；
还有就是：
3d的兼容行不好；
canvas动画：
canvas+3d动画：
js实现动画：
1、可以自己用js实现缓冲运动框架：
主要是setTimeout和setInterval的应用；
2、requestAnimationFrame
http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
svg实现动画：
