第二十一章 动画模块

  
    
    
    
  
  
    

    

    

    

      

        
![](../image/cloud1.jpeg)
        
![](../image/cloud2.jpeg)
        
![](../image/cloud3.jpeg)
        
![](../image/o.gif)

        
![](../image/cloud1.jpeg)
        
![](../image/cloud2.jpeg)
      
    
  

第173课 动画模块

1、过渡和动画之间的异同
不同点

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

相同点

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

1、告诉系统需要执行哪个动画
animation-name:sjw; 名称可以随意写
2、告诉系统我们需要自己创建一个名称叫做sjw的动画
@keyframes sjw{
from{
margin-left:0;
}
to{
margin-left:100px;
}
}
3、告诉系统动画持续的时长
animation-duration:3s;

第174课 动画模块-其他属性上

告诉系统多少秒后开始执行动画

animation-delay: 2s;

告诉系统动画执行的速度

animation-timing-function: ease-in-out;

告诉系统动画需要执行几次

animation-iteration-count: 3;

告诉系统是否需要执行往返动画
取值：

normal，默认值，执行完一次之后回到启动继续执行
alternate，往返动画，指定完一次之后往回执行下一次
animation-direction: alternate;

告诉系统当前动画是否需要暂停

running 执行动画
paused 暂停
animation-play-state: paused;

第175课 动画模块-其他属性下

1、百分比分割分割动画

@keyframes{
  0%{
  }
  50%{
  }
  70%{
  }
}

2、动画是有一定的状态的

等待状态
执行状态
结束状态

指定动画等待状态和结束状态的样式
animation-fill-mode: backwards;
取值：

none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态时候显示动画第一帧的样式
both: forwards and backwards

第176课 动画模块-连写

格式

animation:名称 时长 速度 延迟时间 次数 往返动画;

简写

animation:名称 时长;

第177课 动画模块-云层动画

保证一直有云需要改变li宽度
速度不一致的情况，调整移动距离或时长

第178课 动画模块-无限滚动上

1、实现无限将第一张或前几张复制一份添加到末尾，当跳动的时候正好显示，看不出跳转效果