Css3 transition
- 5. 关于此模板 Css3动画相关的几个知识点： Css3 transition:平滑的改变CSS属性的值。 (简单的实例：对物体位置、大小、颜色、不透明度的改变。) Css3 2D transform:对物体进行二维的变换，对物体移动、旋转、缩放、 倾斜 Css3 3D transform:对物体进行三维的变换。 Css3 animation:具有较为全面动画步骤。 自定义徽标 浏览器的支持情况
- 6. 示例幻灯片 Css3 transition: transition-property :none | all | background，…… 指定参与过渡的可变换css属性 transition-duration:*指定这个过渡的持续时间 transition-timing-function:*指定过渡速度方程 ，有linear| ease| ease-in | ease-out | ease-in-out | cubic-bezier transition-delay:* 延迟过渡时间 Linear |ease | ease-in | ease-out | ease-in-out都是从cubic-bezier ( <number>, <number>, <number>, <number>) 三次贝塞尔曲线根据特殊参数变换形成的方程。…… Ease-in 表示过渡速度先慢后快 Ease-in-out 表示过渡速度慢快交替 Ease-out 表示过渡舒服先快后慢 http://xiebiji.com/works/mt1.2cn/Docs/index.html#Fx/Fx.Transitions http://zengrong.net/post/1151.htmmotools动画函数 http://blog.lipte.com/archives/54贝塞尔曲线
- 7. 示例幻灯片 Css3 2d transform: transform-origin: x,y (变形原点，也就是该元素围绕着那个点变形或旋转, left、right、top、center、bottom) transform-property :transform-function…… 比如: translate(80px, 80px)偏移 scale(1.5, 1.5)缩放 rotate(45deg)旋转 skew(35deg,35deg)斜切 Matrix(x……)矩阵变换，就是基于X和Y 坐标重新定位元素，它使用6个参数 http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html数学原理 http://zh.wikipedia.org/zh-cn/%E5%8F%98%E6%8D%A2%E7%9F%A9%E9%98%B5变换矩阵
- 8. 示例幻灯片 Css3 3d transform: transform-style: flat | preserve-3d 变换的类型 Perspective： none | <number>变换视觉角度 Perspective-orgin:变换视觉角度原点 backface-visibility:visible | hidden背割面是否可见 transform-property :transform-function…… 比如: translate3d(x, y, z)偏移 scale( x, y , z)缩放 rotate3d(x,y,z,45deg)旋转 --rotateX(45deg), rotateY(45deg), rotateZ(45deg) skew(35deg,35deg)斜切 例子：
- 9. 示例幻灯片 Css3 animation:只在webkit核心的浏览器上起作用 @keyframes “关键帧”{ （关键帧的时间函数） n%{ property:value; animation-timing-function:ease;} from{property:value; } to{property:value; } } animation-name:*关键帧 （可以有多个关键帧） animation-duration:*指动画的持续时间 animation-timing-function:*指定动画速度方程 animation-iteration-count:*动画循环播放的次数 animation-direction:*动画播放的方向，是否倒着播放.normal | alternate animation-play-state:*播放状态 running | paused animation-delay:*延迟过渡时间 http://www.zhangxinxu.com/study/201011/css3-transition-animate-demo-6.html
- 10. Js 动画的影响 js原理 所谓动画，就是在一段时间内，通过 click，focus，mousemove,mouseover,mouseout事件连续改变 DOM 元素的属性。 JavaScript 实现动画，最传统的方法就是采用定时器，在一段时间内（duration 时长），遵循特定规律（easing 平滑函数），改变 DOM 元素的属性（props, 最常见的是 style），在动画结束时，触发回调（callback）。一个典型的接口如下： Varanim = new Anim(elem, props, duration, easing, callback); anim.run(); 有了 CSS3 Transitions之后，传统方法中的定时器变得多余，我们只需： elem.style.transition = 'props duration time-function'; elem.style.cssText += ';' + targetStyle; 这样就能调用浏览器原生的 transitions 将元素从当前样式逐步过渡到最终样式，这就是动画！
![Css3 transition 、 2D transform、 3D transform、animation FLASH中的动画原理：许多静止的连续性帧对应的画面，根据 时间顺序播放而产生的视觉动画，即看起来画面在动。 Flash动画的类型： ,[object Object]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)