css3.0早就有支持动画的属性，但是一直没有尝试，最近有空闲，所以学习一下，顺便记录一共以后回顾。

在我的理解暂时css的动画分两种一种是关键帧动画，一种是鼠标事件动画。

关键帧动画主要是有 animation触发，

.mac { width: 100px; position: relative;  animation:aaa 4s infinite 1s ease-in-out; margin-left: 550px;  border-radius: 50px; }

例如 animation:aaa 4s infinite 1s ease-in-out;其中animation是动画的css名，aaa是事件的名称，4s是动画的持续时间，infinte是动画的循环，这个也可以写成5 表示动画的执行次数是5次，1s是动画的延迟执行时间，ease-in-out 是动画的缓入缓出。

然后就是aaa的动画事件的定义了，

@keyframes aaa {
        0%{top:0px;left: 0px;  background: #f00;}        
        50%{top:300px; left: 100px; transform: rotateY(1turn); background: #00f;}        
        100%{top:0px; left: 0px; }
        }

这个大概看一下就了解了，分别是整个动画的时间分成三个关键帧，每一个关键帧的动画效果是什么，其中第二个关键帧的动画transform: rotateY(1turn);表示动画沿Y轴旋转效果，top和left 分别是动画的XY轴的位置。

其二就是鼠标事件动画例如：

    .pic a{ width: 100%; height: 210px; display: block; transition: 0.5s all ;  }
    .pic a:hover { transform:  scale(1.2); }

transition 属性设置元素当过渡效果，四个简写属性为：

• transition-property   这默认可以是all width height ，指的是宽度或者高度动画属性都发生变化
  

• transition-duration   动画的执行时间
  

• transition-timing-function   动画效果的缓动，值ease或者ease-in
  

• transition-delay   动画延迟执行时间
  

默认值：    all 0 ease 0

transform:  scale(1.2);主要就是动画效果，2D缩放和3D旋转效果

https://send.firefox.com/download/8dfc0ebb964748a9/#A49FZG94TNaknmkAsZZJBg