前言

今天在学习CSS动画的时候，看了张鑫旭老师的CSS动画博客！！！感觉受益匪浅，这里无情把引言copy过来，激励和鞭策自己！！！张鑫旭的博客图片 CSS动画相关的几个属性是：transition,transform,animation;可以分别理解为过渡，变换，动画。虽意义相近，但具体角色不一。就像是SHE组合，虽然都是三个女生，都唱同一首歌，但有负责高音，和擅长低音的，具体工作于角色还是有差异的。

transition 指过度，就是从a点到b点，作用是补充关键帧，是transform的润滑剂。
transform 指变换，旋转啊，缩放啊，偏移啊什么的，需要与远房亲戚transition配合使用。
animation 指动画，是先申明关键帧，然后把这个关键帧给目标动画，比较高级。每个用法后面都有经验分享，大家可以着重看一下！

（一）Transform 4种用法，不懂就MDN

transform指变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸，压缩，旋转，偏移。见下面示例代码:

 #skew { transform: skew(35deg); }
 #scale { transform:scale(1, 0.5); }
 #rotate { transform:rotate(360deg); }
 #translate { transform:translate(50px, 50px); }
 #mix{transform:skew(20deg) scale(1.1,5) rotate(360deg) translate(10px, 20px);}

位移 translate 摸我预览

  transform: translateX(50px);
  transform: translateY(-50px);
  transform: translateZ(-200px);
  translate3d(x,y,z);

2. 缩放 scale 摸我预览

xtransform: scaleX(1.5);
xtransform: scaleY(1.5);
transform: scale(1.5,0.5);

3. 旋转 rotate 摸我预览

  transform: rotateZ(45deg);

4. 倾斜 skew 例如：摸我预览

  transform: rotate3d(1,1,1,45deg);

（二）Transition 要多动手尝试

CSS3 transition 属性其作用是：平滑的改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。只要一个整站通用的class，就可以很轻松的渐进增强地实现动画效果，下面先开看看他的语法： 过渡方式有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 其中，linear线性过度，ease-in由慢到快，ease-out由快到慢，ease-in-out由慢到快在到慢。具体的使用方法，大家配和他的亲戚transform尝试！！！CSS是一门动手才能学会的学科！！！！

实战（一）：用transform和transition实现红心变大

红心变大 (transform版本) 预览

当鼠标放到红心上面时，会触发红心变大效果。红心的做法是先做个3个正方形，然后旋转变化得到了红心.然后需要写给红心加一个hover事件，让鼠标放上去就可以触发。这里就同时用到了变换和过渡。大家可以试着自己加一些其他的属性，

（三）animation 要多动手尝试

截止2010年11月份，animations似乎还是只在webkit核心的浏览器上起作用，这里我是在jsbin上面演示的。@keyframes的语法和用法如下：@keyframes里面写关键帧，写完挂到需要动画的标签上。 animation的语法格式如下： 具体的使用实例如下:这里先把关键帧@keyframes skew 写好，然后写animation,用它就得把人家的名字写对了，写错了是执行不了动画的。 其实animation中使用的效果都是transfrom里的，倾斜、放大缩小、旋转、平移等等，这里我也用这种方式写了一个demo,摸我预览。