前端视觉优化（四）css动画，animation属性

实战展示

让这个手指一直在 \ 这个对角线上移动。匀速、一次完整周期1.5s

	.guide {
        position: absolute;
        height: 3.16rem;
        width: 3.16rem;
        bottom: -1.5rem;
        right: -1.5rem;
        animation: slip 1.5s infinite ease-in-out;    //核心代码。
      }
      @keyframes slip {                               //核心代码。
        0% {
          bottom: -1.5rem;
          right: -1.5rem;
        }
        50% {
          bottom: -2rem;
          right: -2rem;
        }
        100% {
          bottom: -1.5rem;
          right: -1.5rem;
        }
      }

infinite 是指无限播放、重复，可以用一个数字表明播放多少次

再来个栗子

animation:myAnim      1s        linear      1s        infinite   alternate both running;
         事件名称   一次动画时间    速度    延迟开始时间  次数   
         
         后面三个分别是：（比较鸡肋，用不上）
         animation-direction的属性
         animation-fill-mode的属性
         、animation-play-state的属性
         
@keyframes myAnim {                               //核心代码。
        0% {
         ...
        }
        50% {
           ...
        }
        100% {
          ...
        }
      }

备注（其他文章）

• 视觉优化其他篇
• 想继续进阶点这，感觉没必要