HTML与CSS中的动画模块是什么

这篇文章运用简单易懂的例子给大家介绍HTML与CSS中的动画模块是什么，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

10年积累的网站制作、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站设计后付款的网站建设流程，更有达茂旗免费网站建设让你可以放心的选择与我们合作。

一. 动画模块

1.过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画
动画不需要人为的触发就可以执行动画

1.2相同点

过渡和动画都是用来给元素添加动画的
过渡和动画都是系统新增的一些属性
过渡和动画都需要满足三要素才会有动画效果

2 动画三要素

2.1告诉系统需要执行哪个动画
2.2告诉系统我们需要自己创建一个名称叫做lnj的动画
2.3告诉系统动画持续的时长

p{             width: 100px;    
 height: 50px;  
 background-color: red;       
 /*1.告诉系统需要执行哪个动画*/   
 animation-name: lnj;       
 /*3.告诉系统动画持续的时长*/             
  animation-duration: 3s;       }        
 /*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/  
 @keyframes lnj {            
  from{                 margin-left: 0;           }             
  to{                 margin-left: 500px; }         
  }

二.动画模块 - 其它属性 (上)

  p {         
  width: 100px;         
  height: 50px;         
  background-color: red;         
  animation-name: sport;         
  animation-duration: 2s;         
  /*告诉系统多少秒之后开始执行动画*/         
  /*animation-delay: 2s;*/         
  /*告诉系统动画执行的速度*/         
  animation-timing-function: linear;         
  /*告诉系统动画需要执行几次*/         
  animation-iteration-count: 3;  
  //infinite : 无限的         
  /*告诉系统是否需要执行往返动画         
  取值:         normal, 默认的取值, 执行完一次之后回到起点继续执行下一次         
  alternate, 往返动画, 执行完一次之后往回执行下一次         
  */         animation-direction: alternate;     }     
  @keyframes sport {         
  from{             margin-left: 0;         }         
  to{             margin-left: 500px;         }     }     
  p:hover{         
  /*         告诉系统当前动画是否需要暂停         
  取值:         running: 执行动画,默认取值         
  paused: 暂停动画, 当动画执行时,鼠标hover到p上方时,动画停止,鼠标移开,则继续动画;         
  */         
  animation-play-state: paused;     }

三.动画模块 - 其它属性 (下)

      .box2{             
      width: 200px;             
      height: 200px;             
      background-color: blue;             
      margin: 100px auto;             
      animation-name: myRotate;             
      animation-duration: 5s;             
      animation-delay: 2s;             
      /*             通过我们的观察, 动画是有一定的状态的            
       1.等待状态             2.执行状态             3.结束状态             */
      /*             animation-fill-mode作用:             指定动画等待状态和结束状态的样式 
                  取值:             none: 不做任何改变             
                  forwards: 让元素结束状态保持动画最后一帧的样式; 
                  //向前的            
       backwards: 让元素等待状态的时候显示动画第一帧的样式; 
                   // 向后的             
                   both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
      */             
      /*animation-fill-mode: backwards;*/             
      /*animation-fill-mode: forwards;*/             
      animation-fill-mode: both;         }         
      @keyframes myRotate {            
       0%{                 transform: rotate(10deg);             }             
       50%{                 transform: rotate(50deg);             }             
       100%{                 transform: rotate(70deg);             }        
        } 
      animation-fill-mode

四. 动画模块-连写

1.动画模块连写格式
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画;

2.动画模块连写格式的简写
animation:动画名称 动画时长;

五. 云层效果

六. 无限滚动

                
   
     
         
                       
![](images/banner1.png)
         
![](images/banner2.jpg)
        
                       
![](images/banner3.jpg)
         
![](images/banner4.jpg)
         
                       //把前两个li加在后面,起到过度效果;动画不会显得太生硬.         
                       
![](images/banner1.png)
         
![](images/banner2.jpg)
     
                       
 
  

关于HTML与CSS中的动画模块是什么就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。