CSS3 动画（简单动画的实现，如旋转等）

让一个 div 元素旋转 360 度示例

div 的样式结构:
div {
  margin: 50px auto;
  width: 200px;
  height: 200px;
  background-color: pink;
}

设置旋转属性的类名:

div.rotate {
              /* 旋转360度 */
            transform: rotate(360deg);
              /* all表示所有属性,1s表示在一秒的时间完成动画 */
            transition: all 1s;
}

transition 有四个属性:

property: 规定应用过渡的 CSS 属性的名称。

duration: 定义过渡效果花费的时间。默认是 0,单位是 s。

timing-function: 规定过渡效果的时间曲线。默认是 "ease"。匀速'linear',加速'ease-in',减速'ease-out',先快后慢'ease-in-out'。

delay: 规定过渡效果何时开始。默认是 0。单位 s。

可以连写: transition: property duration timing-function delay;

给 div 元素设置鼠标移入时旋转,也就是给它加上.rotate 类名.鼠标移出时移除类名

$(function() {
  $("div")
    .mouseenter(function() {
      $(this).addClass("rotate");
    })
    .mouseleave(function() {
      $(this).removeClass("rotate");
    });
});