Mistj's Digital Garden

Appearance

0x00b-动画

关键帧 ​

用来定义动画的@keyframes规则和为元素添加动画的animation属性。

css
.animation {
  background: lightblue;
  width: 100px;
  height: 100px;
  animation: over-and-back 1.5s linear 3;
}

@keyframes over-and-back {
  0% {
    background: lightcoral;
  }
  50% {
    transform: translate(150px);
  }
  100% {
    transform: translate(0);
    background: lightgray;
  }
}
.animation {
  background: lightblue;
  width: 100px;
  height: 100px;
  animation: over-and-back 1.5s linear 3;
}

@keyframes over-and-back {
  0% {
    background: lightcoral;
  }
  50% {
    transform: translate(150px);
  }
  100% {
    transform: translate(0);
    background: lightgray;
  }
}

示例中顶一个三个关键帧： 一个在动画的开始（0%），一个在中间（50%），一个在终点（100%）。每个关键帧中声明定义了对应关键帧的样式。

示例： Edit fiddle - JSFiddle - Code Playground

animate是好几个属性的缩写：

  • animation-name
  • animation-duration
  • animation-timing-function 述动画如何加速和/或减速。可以是贝塞尔曲线或者关键字值，就像过渡使用的定时函数一样（ease-in、ease-out，等等）
  • animation-iteration-count 代表动画重复的次数。初始值默认是1
css
animation: 
over-and-back  /* animation-name 动画名称，就像@keyframes规则定义的那样*/
1.5s  /*代表动画持续时间，在本例中是1.5s。*/
linear /*animation-timing-function*/
3 /*animation-iteration-count 代表动画重复的次数。初始值默认是1。*/;
animation: 
over-and-back  /* animation-name 动画名称，就像@keyframes规则定义的那样*/
1.5s  /*代表动画持续时间，在本例中是1.5s。*/
linear /*animation-timing-function*/
3 /*animation-iteration-count 代表动画重复的次数。初始值默认是1。*/;

览器对动画的支持情况比较好，仅有小部分移动浏览器需要使用-webkit-前缀，动画属性（-webkit-animation）和关键帧@规则（@-webkit-keyframes）都要用到。这就需要复制出有前缀和无前缀两套代码。可以考虑使用Autoprefixer来实现。

为3d变换添加动画 ​

实现一个远处飞入动画： https://jsfiddle.net/3f1tuk46/297/

css
.flyin-grid {
  margin: 0 1rem;
  perspective: 500px;
}

.flyin-grid__item {
  animation: fly-in 1600ms ease-in;
  animation-fill-mode: backwards; 
}

@keyframes fly-in {
  0% {
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  56% {
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotateY(0);
  }
}

.flyin-grid__item:nth-child(2) {
  animation-delay: 0.15s;
}

.flyin-grid__item:nth-child(3) {
  animation-delay: 0.3s;
}
.flyin-grid {
  margin: 0 1rem;
  perspective: 500px;
}

.flyin-grid__item {
  animation: fly-in 1600ms ease-in;
  animation-fill-mode: backwards; 
}

@keyframes fly-in {
  0% {
    transform: translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  56% {
    transform: translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    transform: translateZ(0) rotateY(0);
  }
}

.flyin-grid__item:nth-child(2) {
  animation-delay: 0.15s;
}

.flyin-grid__item:nth-child(3) {
  animation-delay: 0.3s;
}

这里用到了animation-fill-mode: backwards; ： 保证延迟执行的动画，在初始状态为第一帧的状态。

  • animation-fill-mode: backwards; 在动画执行之前，浏览器就会取出动画中第一帧的值，并把它们应用在元素上
  • forwards: 使用forwards会在动画播放完成后仍然应用最后一帧的值
  • both: 同时向前和向后填充

通过动画传递意图 ​

spin loading 效果 ​

实现一个loading效果：Edit fiddle - JSFiddle - Code Playground

css
.test3 {
  border-top: 5px solid green;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;  
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
.test3 {
  border-top: 5px solid green;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: white;  
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

其他建议 ​