在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。
从广义上来讲，css3动画可以分为两种。
过渡动画
第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。
要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有
transition-property：规定对哪个属性进行过渡
transition-duration：定义过渡的时间，默认是0
transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease
transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0
为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition 属性上：
如果是使属性的默认值，则可以省略：
相当于：
如果想要同时过渡多个属性，可以用逗号隔开，如：
使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。
这样，当我们把鼠标移动到div上的时候，div的状态发生了变化，就能看到宽度从100到400，高度从100到400，背景颜色从黑到红的，过渡时间为3秒的过渡效果了。
除了使用hover等系统提供的伪类外，我们也可以随意的定义自己的类，然后想要过渡时就通过js把类加到元素上面：
关键帧动画
第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。
关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。具体格式为：
@keyframes 动画名称{
时间点 {元素状态}
时间点 {元素状态}
…
}
例如：
这段代码定义了一个名为demo,且有5个关键帧的动画。0% ，10% 等这些表示的是时间点，是相对于整个动画的持续时间来说的，时间点之后的花括号里则是元素的状态属性集合，描述了这个元素在这个时间点的状态，动画发生时，就是从第一个状态到第二个状态进行过渡，然后从第二个状态到第三个状态进行过渡，直到最后一个状态。一般来说，0%和100%这两个关键帧是必须要定义的。
关键帧的书写方式很灵活，一行可以写多个关键帧。
甚至它们之间的空格也是可以不要的。
现在我们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就行了。
把动画绑定到元素上，我们可以使用animation属性。animation属性有以下这些：
像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。
只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。
--------------------------------------------------------------------------------------------------------------------
注意，为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀
animate.css的使用
animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，可以先在本页看下演示效果，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：
首先在head中引入下载的animate.css文件
然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。
假设使用jquery，要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake，所以代码是这样的：
这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。
至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。
注意这些属性还要记得加上各浏览器的前缀。
总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。
基础性的学习网站：
w3school：http://www.w3school.com.cn/
w3cplus：www.w3cplus.com
MDN网站 ：https://developer.mozilla.org/zh-CN/docs/Web
菜鸟教程网：http://www.runoob.com
易百教程：http://www.yiibai.com/
脚本之家：http://www.jb51.net
视频类的学习网站：
尚学堂：http://www.bjsxt.com/
慕课网：https://www.imooc.com/
扣丁课堂：https://www.codingke.com/
极客学院：http://www.jikexueyuan.com/
腾讯课堂：https://ke.qq.com/
51cto：http://edu.51cto.com/courselist/index.html
实验楼：https://www.shiyanlou.com/
网易云课堂：http://study.163.com/
我要自学网：http://www.51zxw.net/
个人博客类的学习网站：
张鑫旭：http://www.zhangxinxu.com/
阮一峰：http://www.ruanyifeng.com/home.html
廖雪峰：https://www.liaoxuefeng.com/
辰辰：http://www.chennoted.com/
轩枫阁：http://www.xuanfengge.com/
社区类的学习网站：
segmentfault：https://segmentfault.com/
掘金：https://juejin.im/
简书：https://www.jianshu.com/
WEB前端-伯乐在线：http://web.jobbole.com/
Stack Overflow:https://stackoverflow.com/
CSDN：https://www.csdn.net/
博客园：https://www.cnblogs.com/
开发者头条：https://toutiao.io/
1）一般来说，偏移掉字体的方式是使用：text-indent:-9999px （注意：只能用于block，table cells和inline-block）
text-indent:-9999px；的具体使用方法：把h1作为一个块来显示（display:block），指定长宽（和图片一样大小），然后指定h1的背景图片，也就是将我们需要的图片作为h1这个 标签的背景。而h1标签中插入的，仍然是作为字符形式出现的博客标题，然后用text-indent:-9999px将文字甩到屏幕看不到的地 方。（9999px应该是足够了，谁的屏幕也没那么大吧）
如：
<h1><a href=“http://www.seo100.net/”>博客园</a></h1>
在CSS文件中：（注意：将h1转化成block的话，他身后的的元素就被他赶到下一行了。如果正好这个h1后面，是一个按钮，就要用float来浮动以使他身后再出现簇拥者）
h1 a{height:30pxwidth:165pxfloat:lefttext-indent:-9999pxbackground-image:url(images/logo.gif)background-repeat:no-repeatdisplay:blockposition:relative
}
在h1使用上语义明确，符合语义化定义。text-indent就是首行缩进，大家都在中文段落，首行空两格用过它。这里通过负值缩进，使文字 超出可视区，而这时h1下的背景就显示出来了，h1中包含的<a>标签又不影响使用，对于隐藏文字“站点名称”应该是最佳方案了。但对于多段 文字的隐藏这个方法就不适合了。
另外，点击<h1><a>链接时，会产生一个虚线框，对于IE还好，没什么问题，虚线框只是在背影图片大小。但是Firefox就有些麻烦，它把缩进的文字范围也包含进来了，这样不是很美观。
于是需要屏掉点击时产生的虚线框，IE和FF屏虚线框方法不一样。IE采用的遍历方法(HTC,css表达式)有些耗系统资源，正好我们只需要隐藏FF下的虚线框就行了，IE就不管了，说一下Firefox如何去掉链接的虚线框的方法。
a{outline:none
}
outline是css3的一个属性，用的很少。声明，这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容。只有ff,ie8在加了outline:none后会取消聚焦的虚线框。
2）使用overflow:hidden完美隐藏background之上的字体
line-height:0
font-size:0
overflow:hidden
或 (不大适合用在h1标签上）.text-hidden {display:blockoverflow:hiddenwidth:0height:0
}
3）还有另外2种方法，不推荐使用。
1、display:none
这个大家普遍说法是，搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略，不为隐藏的对象保留物理占位空间。GG也搜CSS文件？不过如果用这个方法，<h1>如何设计，也是难题。
2、visibility:hidden
和display:none相对应，为隐藏的对象保留物理占位空间。
