1: transition: ;
    代表的是过渡动画 只关注css属性的变化 只要变化就会触发动画效果
    transition: css属性名，完成过渡需要的时间;

    2：transform: ;
    transform属性允许你旋转，缩放，倾斜或平移给定元素
    translate() : 表示在二维平面上水平方向移动元素
    rotate(): 旋转而不变形 值为正时瞬时间旋转 为负时逆时针旋转
    scale(): 缩放
    3：animation: ; 关键针动画
    需要配合@keyframes 使用
    animation-timing-function 速率函数
    ease（默认值） 慢-》 快-》慢
    linear 匀速的
    ease-in 慢速开始 慢-》快
    ease-out 慢速结束 快-》慢
    ease-in-out: 慢-》快-》慢

    animation-delay 动画的延迟时间
    可以为负值 负值代表的是动画立即触发 并且跳过多少秒执行
    animation-iteration-count : 动画执行的次数
    infinite 无休止的运动
    animation-direction 动画运动的方向 是否做往返运动
    normal正常的0% - 100%
    reverse 反向的运动 100% - 0%
    alternate 正常的往返运动
    alternate-reverse 反向的往返运动
    animation-fill-mode 动画在静止状态的样式
    forwards: 动画停止在最后一个关键帧的位置
    backwards: 代表动画第一个关键帧立即作用
    both: 代表的是动画第一个关键帧立即作用并且动画停止在最后一个关键帧的位置
    animation: 关键帧动画 设置了就会立即的去执行 不关注子属性顺序的
    但是其中的动画执行时间和动画延迟时间相对顺序是不能变得

    1. /*关键帧动画例子*/
    2. .monster{
    3.     width: 110px;
    4.     height: 100px;
    5.     border-radius: 20px;
    6.     background: #e55A54;
    7.     box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    8.     animation: jumping 0.8s infinite alternate; 
    9. }
    10. @keyframes jumping{
    11.     0%{
    12.         top: 0;
    13.         box-shadow: 0 0 20px rgba(0, 0, 0,.2);
    14.     }
    15.     50%{
    16.         top: 0;
    17.         box-shadow: 0 0 20px rgba(0, 0, 0,.2);
    18.     }
    19.     100%{
    20.         top: -50px;
    21.         box-shadow: 0 120px 20px rgba(0, 0, 0,.2);
    22.     }

    4：filer