css动画的基本使用方法

提问：animation动画与transform属性的区别

回答：比起transform需要手动触发，animation动画是自动播放的，并且可控，可循环播放，功能更加强大

接下来看一下动画实现的步骤：

第一步：定义动画

    /* 方法一 */

    @keyframes  动画名{

         from{}

         to{}
    }

    /* 方法二*/

    @keyframes  动画名{

        0%{
          }
        50%{
          }
        100%{
          }
    }

    /* 例子 */
    @keyframes font {
      45%{
        transform: rotate(360deg) scale(3.5) 
      }
      80%{
        transform:  scale(2.7);
      }
      90%{
        transform:  scale(1.6);
      }
      100%{
        transform: scale(1.5);
      }
    }

注意：方法二中是%到100%都是可以定义的，在这里我只演示了三个值。如果动画开始时没有明显的变化，则0%和from{}可以省略不写。

第二步：调用动画

/* 语法提示 */ 
animation: name duration timing-function delay iteration-count direction fill-mode;

/* 举例*/
    .font{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      animation: font 1s  linear ;
    }

在css属性中，通过animation这个属性来调用动画

语法结构： animation：动画名称(必写)  动画时长(必写)  速度曲线   延迟时间   重复次数   动画方向   执行完毕时的状态

注意：取值不分先后顺序，如果有两个时间值，那么第一个时间表示动画时长，第二个时间表示动画播放的延迟时间

提醒:要想让运动的动画鼠标经过时停止，需要在运动的元素的选择器的hover伪类选择器里设置 animation-play-state: paused; 

 代码展示：

  
  
  
  
  
  
  


  

    
简单动画
  

效果展示： 

一个简单的动画效果

目前用到的动画属性值

类别	属性值	作用
曲线速率	linear	匀速线性运动
曲线速率	steps(数字)	逐帧动画(一般配合精灵图使用）
曲线速率	ease-in-out	慢速开始和结束
动画次数	number	定义运动的次数，默认是一次
动画次数	infinite	无限运动（反复横跳 不是）
动画方向	alternate	逆向运动(运动次数需要大于1才能看出效果)
动画终点	none(默认值)	默认终点是原点
动画终点	forwards	在运动结束的之后，停到结束位

以上内容，是自己在学习中总结出来的，有啥错误和补充欢迎在评论区留言~