css3动画开发笔记

动画滑出效果

首先来看DMEO。
按钮的尺寸有一个放大的效果。利用transform: scale方法来实现；在放大的过程中，按钮的位置从右向左平移。利用left的值的变化可以实现该效果，为了避免按钮在最初出现时突兀的感觉，利用opacity: 0隐藏按钮，随着按钮的移动，opacity的值逐渐变为1。总的代码为：

@keyframes fade {
    from{ background: rgba(62, 191, 36, 1); transform: scale(0.5); left: 146px;}
    50%{ background: rgba(62, 191, 36, 1);}
    to{ background: rgba(62, 191, 36, 1); transform: scale(1); left: 0;}
 }

接着是光芒效果。光芒的宽度从0变到178，透明度从0变成1。
光芒帧动画：

@keyframes shadow {
    from{ width: 0; opacity: 0;}
    to{ width: 178px; opacity: 1;}
 }

最后是调整动画的持续时间和延迟时间，保持协调：

.ani1 .shadow{
    -webkit-animation-name:shadow;/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: .8s;/*动画持续时间*/
     -webkit-animation-timing-function: linear;迟时间*/
     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
     -webkit-animation-fill-mode: forwards;
  }
  .ani1 .icons{
    -webkit-animation-name: fade;/*动画属性名，也就是我们前面keyframes定义的动画名*/
     -webkit-animation-duration: 0.75s;/*动画持续时间*/
     -webkit-animation-timing-function: linear; /*动画频率，和transition-timing-function是一样的*/
     -webkit-animation-delay: .2s;/*动画延迟时间*/
     -webkit-animation-iteration-count: 1;/*定义循环资料，infinite为无限次*/
     -webkit-animation-fill-mode: forwards;
  } 

另外贴上两个类似效果的实现：DMEO1，DEMO2