css3动画学习笔记，动画总结

动画（animation）

1、动画（animation）

是css3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相对比较过渡，动画可以实现更多变化，更多控制，持续自动播放等效果。

1.1动画的基本使用

制作动画分为两步：

1、先定义动画

用keyframes定义动画（类似定义类选择器）

动画序列

• 0%是动画的开始，100%是动画的完成。这样的格则就是动画序列。

• 在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果。

• 动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多样式的次数。

• 请用百分比来规定变化的时间，或用关键词“from”和“to”，等同于0%和100%

@keyframes 动画名称 {
	0%{
		width：100px;
	}
	100%{
		width:200px;
	}
}

2、在使用（调用）动画

如果只有开始和结束的和也可以使用“from”、“to”语句


我们已经实现了简单的div移动效果，而animation它的用法可不仅如此，然后我们通过上面的例子进行一个进阶练习，多状态变化。

注：上面的0%步骤可以省略

5.2动画常用属性

5.3动画简写属性

animation：动画名称 持续时间 运动线性 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

animation: myfirst 5s liner 2s infinite alternate

注：简写属性中不包括animation-play-state

案例：

HTML:

  <div class="map">
    <div class="city tianjin">
      <div class="ddd"></div>
      <div class="poit2"></div>
      <div class="poit3"></div>
    </div>
    <div class="city cangzhou">
      <div class="ddd"></div>
      <div class="poit2"></div>
      <div class="poit3"></div>
    </div>
  </div>

CSS:

    <style>
        .map{
            position: relative;
            background: #000;
            height: 500px;
            width: 1000px;
            margin: 0 auto;
        }
        .city{
          position: absolute;
          top: 200px;
          right: 180px;
        }
        .cangzhou{
          top: 300px;
          right: 50%;
        }
        .map .ddd{
          width: 8px;
          height: 8px;
          background: #ff0;
          border-radius: 50%;
        }
        .map div[class^="poit"]{
          position: absolute;
          width: 8px;
          height: 8px;
          left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
          border-radius: 50%;
          box-shadow: 0 0 12px #ff0;
          animation: pulse 2s linear infinite;
        }
        .poit3{
          animation-delay: 1s !important;
        }
        @keyframes pulse{
          70%{
            width: 40px;
            height: 40px;
            opacity: 1;
          }
          100%{
            width: 50px;
            height: 50px;
            opacity: 0;
          }
        }
    </style>

效果图：

1.4速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

动画部分已经完结，随后会更新css 3D