CSS3动画-加载

css3的动画还是值得看看的,争取多看多写多分享一些动画效果。这次就以网站中常见的加载动画开始:

JS Bin

这里用到的css3的属性:

animation

语法:

animation: name duration timing-function delay iteration-count direction

详情:animation

keyframes

keyframes就是对应上面animation-name的

@keyframes animationName {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
  }
}

详情:keyframes

box-shadow

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

关键点:

  1. animation-delay:有时间差才会有高低区分
  2. keyframes中的box-shadow,来增加向上伸展的部分
分享到: