动画

偶然间发现一个软件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标签：

最后来一个例子：

<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{

　　 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 {
　　 80%;
　　max- 700px;
}

@media only screen and (max- 700px){
　　.modal-content {
　　　　 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实现动画：