[分享]css3动画特效例子

CSS3动画特效已成为今天前端设计师的关注点之一，其中有许多精美的例子能够提供设计师灵感和想法。以下是一些代表这些精美动画特效的例子。.zoom { webkitanimationname: zoom...

CSS3动画特效已成为今天前端设计师的关注点之一，其中有许多精美的例子能够提供设计师灵感和想法。以下是一些代表这些精美动画特效的例子。

.zoom {
   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;
   animation-fill-mode: both;
}
@-webkit-keyframes zoom {
   0% {
     -webkit-transform: scale(1,1);
   }
   50% {
     -webkit-transform: scale(1.2,1.2);
   }
   100% {
     -webkit-transform: scale(1,1);
   }
}
@keyframes zoom {
   0% {
     transform: scale(1,1);
   }
   50% {
     transform: scale(1.2,1.2);
   }
   100% {
     transform: scale(1,1);
   }
} 

这是一个让图片放大出现的效果。在hover状态下，这个图片会变得更大，然后再恢复原来的大小。

/*loading loading效果*/
.loading{
  position:relative;
  width:300px;
  height:30px;
  margin:0 auto;
  text-align:center;
  line-height:30px;
  font-size:16px;
  font-weight:bold;
}
.loading span{
  position:absolute;
  left:-100px;
  top:0;
  text-align:center;
  width:100px;
  height:30px;
  background:#16a085;
  color:#fff;
  animation-name: loading;
  animation-duration: 1s;
  animation-fill-mode:forwards;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(.78,.05,.86,.35);
}
@-webkit-keyframes loading{
  0% {
    left:-100%
  }
  100% {
    left:100%;
  }
} 

这是一个有趣的loading效果，有一条绿色的线在居中的文本后面滚动，形成一种视觉参差不齐，逐渐出现的效果。

/*hover效果*/
.outer{
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
  width:300px;
  height:200px;
}
.inner{
  position:absolute;
  top:0;
  left:-80px;
  width:200px;
  height:200px;
  text-align:center;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
.outer:hover .inner{
  transform:translateX(80px);
} 

上面是一个带有hover效果的特效。鼠标悬浮在.outer元素上时，.inner元素会平移出来。这是一个很酷的在文本周围留下空间的方法。