CSS3 动画效果

transform

transform属性允许你旋转，缩放，倾斜或平移给定元素。

只能转换由盒模型定位的元素，具有display: block属性的元素。

transform: translate(30px, 20px) rotate(20deg) scale(2, 0.5) skew(30deg, 20deg);
//translate 位移
//rotate 旋转
//scale 缩放
//skew 倾斜
//matrix 矩阵

transition

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transform 1s linear;

animation

 animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。

animation: name 3s linear 1s infinite alternate slidein;

关键帧 @keyframes at-rule 规则通过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。和 转换 transition 相比，关键帧 keyframes 可以控制动画序列的中间步骤。

@keyframes identifier {
  0% { top: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

clip-path

使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

clip-path: circle(40%); //圆形
clip-path: ellipse(130px 140px at 10% 20%); //1/4圆形
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); //菱形

动画事件监听器

transition 监听

el.addEventListener("transitionend", updateTransition, true);

animation 事件监听

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);