css动画之如何写个跳动的心送妹子

虽说立志成为一个顶呱呱的全栈工程师，但是在前端方面的涉猎其实是很少的，要说对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爬虫的文章，自己的知识点就会比较多。