虽说立志成为一个顶呱呱的全栈工程师，但是在前端方面的涉猎其实是很少的，要说对js的学习还是因为要用nodejs的缘故，总有些本末倒置的感觉。
最近专业内部的大实习是要做一个志愿者银行系统，我们的三人组采用纵向分工的方法，这样有利于大家在每个环节都能参与到。不过在快收尾的时候，界面严重不统一，作为处女座怎么能熟视无睹呢，于是立即上马前端进行大幅修改。
俗话说，磨刀不误砍柴工，对css深入学习是很有必要的。学习的过程中有很多启发，于是就有了这篇文章。
--------------------------------以上都是废话-----------------------------------------
| 值 | 描述 |
|---|---|
| transition-property | 设置过渡效果的 CSS 属性的名称 |
| transition-duration | 设置完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 设置速度效果的速度曲线 |
| transition-delay | 设置过渡效果何时开始 |
css动画的核心在于使用好transition和animation。
我们先来看看transition的各项属性
| 值 | 描述 |
|---|---|
| transition-property | 设置过渡效果的 CSS 属性的名称 |
| transition-duration | 设置完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 设置速度效果的速度曲线 |
| transition-delay | 设置过渡效果何时开始 |
transition的特点是需要一个触发，比如鼠标移入（:hover）等事件；
我们先举个栗子：
利用transition实现鼠标指针移到爱心上心就跳一下
先自己制作一个爱心的图片，格式不限，也可以使svg型的，比如这样
这里插一句
在CSS 3引入Transition之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。--- 参见阮一峰老师的博客
所以transition的作用在于，指定状态变化所需要的时间，这样显著增加了美感。
不过我们可以不用把每个属性都声明一遍，transition也提供简写的方式
下面的代码在鼠标移到后会花费1s的时间放大爱心
.heart{
height:500px;
width:500px;
transition:1s height, 1s width;
}
.heart:hover{
height: 800px;
width: 800px;
}
其实等同于
.heart{
transition-property: height，width
transition-duration: 1s;
}
测试结果可以点这里
于是我们引出animation，首先看一看animation和transition的不同
1、都可以定义开始和结束状态，但是animation还可以指定更为精确的中间状态
2、animation可以像transition一样被触发，也可自动运行
3、animation可以无限循环的运行，也可指定运行次数
下面我们一起实现真正的跳动的爱心
第一步利用keyframes关键字定义动画名称
keyframes beat_animation {
0% { transform: none; }
100% { transform: scale(1.3); }
}
上面的代码就是定义了动画的名字叫beat_animation, 动画是指变大为原来的1.3倍。利用transform可以做出很多漂亮的效果，这个大家自行谷歌就不多做介绍了。
animation需要指定动画一个周期持续的时间，以及动画效果的名称。
.heart {
animation: beat_animation 300ms infinite;
}
加入infinite关键字就可以让动画无限播放。因为默认情况下，动画只播放一次。
当然上面的代码也是简写
我们看看依次声明完整的属性所需要的代码是什么样
.heart {
animation-name: 'beat_animation';
animation-duration: 300ms;
animation-timing-function: linear;
}
这里要提醒大家前缀的重要性，目前，IE 10和Firefox支持没有前缀的animation，而chrome不支持，所以必须使用webkit前缀
所以上面的代码要修改成
.heart {
-webkit-animation-name: 'beat_animation';
-webkit-animation-duration: 300ms;
-webkit-animation-iteration-count: infinite;
}
最终效果请点这里
css就写这么多，很多内容也是学自阮一峰老师的博客，原创并不是很多，下次会写关于nodejs爬虫的文章，自己的知识点就会比较多。
