摘要：我最近有機(jī)會(huì)深入研究一些動(dòng)畫。下一步是添加動(dòng)畫效果并確定它們何時(shí)發(fā)生。創(chuàng)建關(guān)鍵幀后，您可以將動(dòng)畫稱為屬性。點(diǎn)擊動(dòng)畫使用上面的關(guān)鍵幀和動(dòng)畫語(yǔ)法，這里是我用來在本頁(yè)頂部的中制作動(dòng)畫的代碼。

我最近有機(jī)會(huì)深入研究一些CSS3動(dòng)畫。 我使用了像animate.css這樣的庫(kù)，用javascript完成了動(dòng)畫，但從未做過任何自定義的CSS3工作 原文

我們最近在SeatGeek更新了我們的“跟蹤"圖標(biāo)，以匹配我們的新iPhone應(yīng)用程序。 首席設(shè)計(jì)師在PSD中創(chuàng)建了具有不同狀態(tài)的心臟圖標(biāo)，并在下面創(chuàng)建了動(dòng)畫：

在CSS中，動(dòng)畫是一種讓元素逐漸改變樣式的效果。 您可以使用@keyframes關(guān)鍵字創(chuàng)建動(dòng)畫，后跟動(dòng)畫的名稱。

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

要使動(dòng)畫跨瀏覽器兼容，您需要使用供應(yīng)商前綴：

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

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

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

@-o-keyframes heartAnimation {
  /* Opera 12+ */
}

但是，對(duì)于本文的其余部分，我將為了空間而排除供應(yīng)商前綴。

下一步是添加動(dòng)畫效果并確定它們何時(shí)發(fā)生。 您可以使用0％到100％的百分比或使用“from"和“to"關(guān)鍵字來執(zhí)行此操作，只需使用起始和結(jié)束狀態(tài)的簡(jiǎn)單動(dòng)畫。 下面是將背景顏色從黃色變?yōu)樗{(lán)色，然后從黃色變?yōu)榫G色變?yōu)樗{(lán)色的示例。

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

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

創(chuàng)建關(guān)鍵幀后，您可以將動(dòng)畫稱為CSS屬性。 例如，下面的代碼將運(yùn)行colorChange動(dòng)畫2次以上，持續(xù)時(shí)間為2秒：

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

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

您可以查看所有CSS3動(dòng)畫屬性here

在看了幾次gif之后，我意識(shí)到它是一個(gè)輕微的收縮，然后擴(kuò)展到比原始尺寸略大的尺寸，然后回到原來的尺寸。

使用上面的CSS3關(guān)鍵幀和動(dòng)畫語(yǔ)法，這里是我用來在本頁(yè)頂部的gif中制作動(dòng)畫的代碼。 它使用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
}

對(duì)于圖像，我使用的是精靈，所以我還需要更改圖像的位置以獲得紅色背景：

.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
}

對(duì)于一個(gè)加載狀態(tài)，我讓心臟發(fā)白并且無限地脈動(dòng)in-and-out。 它還縮小并縮小到原始大小，而不是像上面的heartAnimation代碼那樣在進(jìn)入原始狀態(tài)之前略大于原始大小。 以下是加載狀態(tài)的代碼：

@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;
}

這是我為演示動(dòng)畫而構(gòu)建的網(wǎng)站：

http://heart-animation.herokuapp.com/

下面是我用來點(diǎn)擊每個(gè)圖標(biāo)時(shí)動(dòng)畫的JS。 JS添加并刪除了我添加動(dòng)畫屬性的類。

$(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");
  });

});