动画animation(CSS3)

动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

@keyframes 动画名称 {
  0%{ 开始位置 }  
  50%{ 过渡 } 
  100%{  结束  }  
}

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            width: 185px;
            height: auto;
            animation: move 2s linear infinite;
            
        }
        @keyframes move {
            0% {
                transform:scale(1);
            }   
            50%{
                transform: scale(0.001);
                /* transform: rotate(180deg); */
            }   
            100% {
                transform: scale(1);
                /* transform: rotate(360deg); */
            }      
        }
    </style>