1.创建html

2. css

.heart {

background: url(http://demo.htmleaf.com/1511/201511131551/images/web_heart_animation.png);

background-position: left;

background-repeat: no-repeat;

height: 100px;

width: 100px;

cursor: pointer;

position: absolute;

left: -14px;

background-size: 2900%;

}

.heart:hover,

.heart:focus {

background-position: right;

}

@-webkit-keyframes heartBlast {

0% {

background-position: left;

}

100% {

background-position: right;

}

}

@keyframes heartBlast {

0% {

background-position: left;

}

100% {

background-position: right;

}

}

.heartAnimation {

display: inline-block;

-webkit-animation-name: heartBlast;

animation-name: heartBlast;

-webkit-animation-duration: .8s;

animation-duration: .8s;

-webkit-animation-iteration-count: 1;

animation-iteration-count: 1;

-webkit-animation-timing-function: steps(28);

animation-timing-function: steps(28);

background-position: right;

}

@-webkit-keyframes dorsyHover {

0% {

-webkit-box-shadow: 0 0 1px 1px #aaa30a;

}

50% {

-webkit-box-shadow: 0 0 1px 1px #fdfbc4;

}

100% {

-webkit-box-shadow: 0 0 1px 1px yellow;

}

}

@-webkit-keyframes dorsyDelete {

0% {

-webkit-transform: rotate(0deg);

}

40% {

-webkit-transform: rotate(10deg);

}

80% {

-webkit-transform: rotate(-10deg);

}

100% {

-webkit-transform: rotate(0deg);

}

}

3.js 点击事件添加类名

4.核心语义

1.backgroundbackground-position: left; (结束为right)

3.animate-duration：1s;(动画运行时间)

4.animation-iteration-count ：n / infinite ;(循环次数 n 不限)

5.animation-timing-function: steps(28);

速度曲线，使用三次贝塞尔函数的数学函数来生成速度曲线

参数为steps时：

第一个参数指定了时间函数中的间隔数量(必须是正整数)

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start等同于steps(1,start)，动画分成1步，动画执行时为开始左侧端点的部分为开始；

step-end等同于steps(1,end)：动画分成一步，动画执行时以结尾端点为开始，默认值为end。

steps() 第一个参数 number 为指定的间隔数，即把动画分为 n 步阶段性展示，估计大多数人理解就是keyframes写的变化次数

作者：AstarX

链接：https://www.jianshu.com/p/753c4ea0c18c