web前端入门到实战：CSS3 动画的实现

任务

咱们最近在SeatGeek更新了咱们的“跟踪"图标，以匹配咱们的新iPhone应用程序。 首席设计师在PSD中建立了具备不一样状态的心脏图标，并在下面建立了动画：

什么是CSS3动画？

在CSS中，动画是一种让元素逐渐改变样式的效果。 您可使用@keyframes关键字建立动画，后跟动画的名称。

@keyframes heartAnimation {
  /* Animation code goes here */
}

要使动画跨浏览器兼容，您须要使用供应商前缀：

@keyframes heartAnimation {
  /* IE 10+ */
}

@-webkit-keyframes heartAnimation {
  /* Safari 4+ */
}

@-moz-keyframes heartAnimation {
  /* Fx 5+ */
}

@-o-keyframes heartAnimation {
  /* Opera 12+ */
}
专门创建的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和须要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）

可是，对于本文的其他部分，我将为了空间而排除供应商前缀。

下一步是添加动画效果并肯定它们什么时候发生。 您可使用0％到100％的百分比或使用“from"和“to"关键字来执行此操做，只需使用起始和结束状态的简单动画。 下面是将背景颜色从黄色变为蓝色，而后从黄色变为绿色变为蓝色的示例。

@keyframes colorChange {
  from {background: yellow;}
  to {background: blue;}
}

@keyframes colorChange {
  0% {background: yellow;}
  50% {background: green;}
  100% {background: blue;}
}

建立关键帧后，您能够将动画称为CSS属性。 例如，下面的代码将运行colorChange动画2次以上，持续时间为2秒：

.color-animation {
  animation-name: changeColor;
  animation-iteration-count: 2;
  animation-duration: 2s;
}

/* Shorthand */
.color-animation {
  animation: changeColor 2 2s;
}

计划动画

在看了几回gif以后，我意识到它是一个轻微的收缩，而后扩展到比原始尺寸略大的尺寸，而后回到原来的尺寸。

Heart点击动画

使用上面的CSS3关键帧和动画语法，这里是我用来在本页顶部的gif中制做动画的代码。 它使用css变换和属性来缩放图像。

@keyframes heartAnimation {
  0% {transform: scale(1,1)}
  20% {transform: scale(0.9,0.9)}
  50% {transform: scale(1.15,1.15)}
  80% {transform: scale(1,1)}
}

.toggle-animation {
  animation: heartAnimation 0.7s; // no iteration count is needed as the default is 1 time
}

对于图像，我使用的是精灵，因此我还须要更改图像的位置以得到红色背景：

.toggle-animation {
  background: url('../images/animation-example-sprite.png') no-repeat -320px 0;
  animation: heartAnimation 0.7s; // no iteration count is needed as the default is 1 times
}

Loading动画

对于一个加载状态，我让心脏发白而且无限地脉动in-and-out。 它还缩小并缩小到原始大小，而不是像上面的heartAnimation代码那样在进入原始状态以前略大于原始大小。 如下是加载状态的代码：

@keyframes loading {
  0% {transform: scale(1,1) }
  50% {transform: scale(0.8,0.8) }
  100% {transform: scale(1,1) }
}

/* Notice the added 'infinite' to is used to make the animation-iteration-count */

.toggle-loading {
  background: url('../images/animation-example-sprite.png') no-repeat -160px 0; // make background white
  animation: loading 1s infinite;
  -webkit-animation: loading 1s infinite;
  -moz-animation: loading 1s infinite;
  -o-animation: loading 1s infinite;
}

查看动画的演示

下面是我用来点击每一个图标时动画的JS。 JS添加并删除了我添加动画属性的类。

专门创建的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①②  分享学习方法和须要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（从零基础开始到WEB前端项目实战教程，学习工具，全栈开发学习路线以及规划）
$(document).ready(function(){

  $('.animation-1 .image').on('click', function(){
    $(this).toggleClass('toggle-animation');
  });

  $('.animation-2 .image').on('click', function(){
    $(this).toggleClass('toggle-animation-slow');
  });

  $('.animation-3 .image').on('click', function(){
    $(this).toggleClass('toggle-loading');
  });
});