css3 动画 animation

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

@keyframes functionName /*Internet Explorer 10、Firefox 以及 Opera*/
@-webkit-keyframes functionName /*Safari and Chrome*/

CSS3 动画属性

下面的表格列出了 @keyframes 规则和所有动画属性：

属性	描述	CSS
@keyframes	规定动画。	3
animation	所有动画属性的简写属性，除了 animation-play-state 属性。	3
animation-name	规定 @keyframes 动画的名称。	3
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。	3
animation-timing-function	规定动画的速度曲线。默认是 "ease"。	3
animation-delay	规定动画何时开始。默认是 0。	3
animation-iteration-count	规定动画被播放的次数。默认是 1。	3
animation-direction	规定动画是否在下一周期逆向地播放。默认是 "normal"。	3
animation-play-state	规定动画是否正在运行或暂停。默认是 "running"。	3
animation-fill-mode	规定对象动画时间之外的状态。	3

 

 

以下是常用的一些动画

颜色闪动效果

.anim {
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-name: blinkPause;
  -webkit-animation-timing-function: ease;
}

@-webkit-keyframes 'blinkPause' {
  0% {
    background: transparent;
  }
  50% {
    background-color: Red;
  }
  100% {
    background: transparent;
  }
}

旋转效果

// 旋转
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

左右滑动

// 左右
@-webkit-keyframes mymove /*Safari and Chrome*/
{
  from {left:0px;}
  to {left:200px;}
}

大小缩放

// 放大缩小
@-webkit-keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0%{
    transform: scale(1);  /*开始为原始大小*/
  }
  25%{
    transform: scale(1.1); /*放大1.1倍*/
  }
  50%{
    transform: scale(1);
  }
  75%{
    transform: scale(1.1);
  }
}

涟漪扩散

// 涟漪扩散
@keyframes living {
  0%{
    transform: scale(1);
    opacity: 0.5;  
  }
  50%{
    transform: scale(1.5);  
    opacity: 0;   /*圆形放大的同时，透明度逐渐减小为0*/
  }
  100%{
    transform: scale(1);
    opacity: 0.5;
  }
}

先就这样吧，记录几个常用的效果。