纯css画一颗跳动的心

•  

• 属性1：transiton：允许css的属性值在一定时间区间内平滑地过渡。

1.        transition-property:执行变换的属性

2.        transition-duration:执行变换的时间

3.        transition-time-function：执行变换的速率

4.        transition-delay:执行变换的延迟时间。

• 属性2：animation：将动画与名称绑定

1.        animation-name:规定需要绑定到选择器@keyframes的名称。其主要有两个值，IDENT/none。IDENT是由Keyframes创建的动画名，即此处的INDENT要和Keyframes中的IDNET一致。

2.        animation-duration:规定动画完成的时间。

3.        animation-time-function:规定动画曲线。

4.        animation-delay:规定动画开始之前的延迟。

5.        animation-iteration-count:规定动画应该播放的次数。

6.        animation-direction:规定是否应该轮流反向播放动画。

其中：animation-time-function：

1)        linear:动画从头到结尾速度是相同的

2)        ease:默认，动画以低速开始，然后加快，在结束前变慢。

3)        ease-in:动画以低速开始

4)        ease-out:动画以低速结束

5)        ease-in-out：动画以低速开始和结束。

6)        cubic-bezier：又称三次贝塞尔，主要为animation生成速度曲线的函数，规定是cubic-bezier(,,,)。

从上图我们需要知道的是cubic-bezier的取值范围：

•  P0:默认值（0,0）
•  P1：动态取值（x1,y1）
• P2：动态取值（x2,y2）
• P3：默认值（1,1,）

其中x轴的取值范围是0到1，y轴取值没有规定。

以一条直线放在范围只有1的坐标轴中，并从中间拿出两个点来拉扯（X轴的取值区间是[0,1]，y轴任意），最后形成的曲线就是动画的速度曲线。当我们不为transition添加cubic-bezier或是其他timing-function时，默认曲线是ease。此时的速度曲线是：

几个常用的固定值对应的cubic-bezier值以及速度曲线。

1.        ease：cubic-bezier（.25，.1，.25，1）

2.        liner：cubic-bezier（0，0，1，1）/cubic-bezier（1，1，0，0）

3.        ease-in：cubic-bezier（.42,0,1,1）

4.        ease-out：cubic-bezier(0,0,.58,1)

5.        ease-in-out：cubic-bezier(.42,0,.58,1)

6.        in out .back(来回的缓冲效果)：cubic-bezier(0.68,-0.55,0.27,1.55)

 

• 属性3：transform:向元素应2D或3D转换。该属性允许我们队元素进行旋转、缩放、移动或倾斜。transform 函数包括了translate（平移转换）、scale（缩放转换）、rotate（转换）和skew（倾斜转换）。
• 属性4：transform-origin：指定元素的中心点在哪里，必须配合transform使用。默认情况下，变形的原点在元素的中心点，也就是元素X轴和Y轴的50%处。

         animation 类似于transition属性，他们都是随着时间改变元素的属性值。主要区别是transition需要触发一个事件（hover事件或者click事件）才会随时间改变其css属性，而animation 在不需要触发任何事件的情况下也可以随着时间变化来改变元素css的属性值，从而达到一种动画的效果。这样我们就可以直接在一个元素中调用animation 的动画属性，基于这一点，css3的animation 就需要明确的动画属性值，即我们需要keyframes来定义不同时间的css属性值，达到元素在不同时间段变换的效果。

• @keyframes:关键帧      keyframes-selector:规定时间百分比

          @keyframes animationname{keyframes-selector{css-styles;}}