css3 animation动画技巧

标签：

一,css3 animation动画前言

　　随着现在浏览器对css3的兼容性越来越好，使用css3动画来制作动画的例子也越来越广泛，也随着而来带来了许多的问题值得我们能思考。css3动画如何让物体运动更顺畅，css3动画如何做弧线动画，css3动画是否有动画库，css3帧动画如何快速简单……   为了解决这些折磨人的问题，我们今天来分析一下:

　　首先介绍css3 Animation动画库：

　　http://daneden.github.io/animate.css/

　　基本涵盖了我们常见的基础css3动画，有时做css3动画没有灵感或者需要快速制作时，我们可以套用里面的css3帧动画，简单粗暴。

　　http://leaverou.github.io/animatable/ 这个是github玩家写的一个常用的hover animation动画

　　css3 Animation在线调节工具：

　　http://melonh.com/animationGenerator/              基于chrome的插件，可以快速调节页面上的动画

　　http://isux.tencent.com/css3/tools.html               腾讯isux一款非常强大的动画工具

　   http://tid.tenpay.com/labs/css3_keyframes_calculator.html           财付通的帧动画调节工具

　　自定义transition-timing-function中的cubic-bezier参数:

　　http://cubic-bezier.com/

　　http://matthewlein.com/ceaser/

二,css3 animation动画技巧

　　1.animation-direction让动画变得更圆滑：

　　　　待完成……

　　2.animation-fill-mode动画结束和开始时设置保持的动画：

　　　　待完成……

　　3.0%用from代表，100%用to，设置cubic-bezier出现的问题：

　　　　待完成……

　　4.动画原则：

　　　　待完成……

css3 animation动画技巧

标签：

原文地址：http://www.cnblogs.com/pingfan1990/p/4502306.html