26.CSS-动画模块

动画模块

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

不同点:
过渡必须人为触发才会执行动画;
动画不需要人为触发就可以执行动画.
相同点:
过渡和动画都是用来给元素添加动画的;
过渡和动画都是系统新增的一些属性;
过渡和动画都需要满足三要素才会有动画效果.

2.动画的三要素

• 告诉系统需要执行哪个动画
• 告诉系统我们需要自己创建一个自己指定名称的动画
• 告诉系统动画需要持续的时间

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

3.属性

• animation-delay:规定动画开始的延迟。
• animation-duration:规定动画完成一个周期应花费的时间。
• animation-name:规定 @keyframes 动画的名称。
• animation-timing-function:规定动画的速度曲线。
  ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
  linear - 规定从开始到结束具有相同速度的过渡效果
  ease-in -规定缓慢开始的过渡效果
  ease-out - 规定缓慢结束的过渡效果
  ease-in-out - 规定开始和结束较慢的过渡效果
• animation-iteration-count:规定动画应播放的次数。
  n-定义动画播放次数的数值。
  infinite-规定动画应该无限次播放。
• animation-direction:告诉系统是否需要执行往返动画
  normal-(默认值)执行完一次之后回到起点继续执行下一次
  alternate-往返执行动画
• animation-play-state:告诉系统当前动画是否需要暂停
  running-执行动画
  paused-暂停动画

//创建动画的另一种格式
	*{
      margin: 0;
      padding: 0;
    }
    div{
      width: 100px;
      height: 50px;
      background-color: red;
      position: absolute;
      animation-name: sport;
      animation-duration: 5s;
    }
    @keyframes sport {
      0%{
        left: 0;
        top: 0;
      }
      25%{
        left: 300px;
        top: 0;
      }
      50%{
        left: 300px;
        top: 250px;
      }
      75%{
        left: 0;
        top: 250px;
      }
      100%{
        left: 0;
        top: 0;
      }
    }

• animation-fill-mode:
  通过观察,动画是有一定的状态的:
  1.等待状态
  2.执行状态
  3.结束状态
  animation-fill-mode的作用就是指定动画等待状态和结束状态的样式;
  取值:
  none-不做任何改变
  forwards-让元素结束状态的时候保持动画最后一帧的样式
  backwards-让元素等待状态的时候显示动画第一帧的样式
  both-让元素等待状态显示动画第一帧的样式和让元素结束状态的时候保持动画最后一帧的样式

4.连写

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

动画连写格式的简写:
animation:动画名称 动画时长;

5.云层效果

在完善代码的过程中,发现云朵在运动后,左边就空白出来了,没有云朵了.在代码中使用了ul,li来存放图片,li默认和ul一样的宽高,li在运动时,ul就空出来了,那么就需要让li扩展宽度,但是扩展宽度只会向右边扩展,左边还是会空出来.所以要使云层向左移动,-200%;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>104-动画模块云层效果</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      height: 400px;
      background-color: skyblue;
      margin-top: 100px;
      animation: change 5s linear 0s infinite alternate;
      position: relative;
    }
    ul li{
      list-style: none;
      width: 400%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    ul li:nth-child(1){
      background-image: url(images/cloud_one.png);
      animation: one 30s linear 0s infinite alternate;
    }
    ul li:nth-child(2){
      background-image: url(images/cloud_two.png);
      animation: two 30s linear 0s infinite alternate;
    }
    ul li:nth-child(3){
      background-image: url(images/cloud_three.png);
      animation: three 30s linear 0s infinite alternate;
    }
    @keyframes change {
      from{
        background-color: skyblue;
      }
      to{
        background-color: black;
      }
    }
    @keyframes one {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -100%;
      }
    }
    @keyframes two {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -200%;
      }
    }
    @keyframes three {
       from{
         margin-left: 0;
       }
       to{
         margin-left: -300%;
       }
     }
  </style>
</head>
<body>
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

6.平面轮播图

无限滚动的特点:在需要轮播的图后面再加上一张或两张最开始的图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>105-平面轮播图</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
        width: 600px;
        height: 188px;
        border: 1px solid #000;
        margin: 100px;
        overflow: hidden;
    }
    ul{
      width: 2000px;
      height: 188px;
      background-color: black;
      animation: move 10s linear 0s infinite normal;
    }
    ul li{
      float: left;
      list-style: none;
      width: 300px;
      height: 188px;
      /*background-color: red;*/
      border: 1px solid #000;
      box-sizing: border-box;
    }
    /*设置选中图片后,动画暂停;并且按住的图片颜色不变,其他图片会有蒙版遮罩*/
    ul:hover{
        animation-play-state: paused;
    }
    ul:hover li{
        opacity: 0.5;
    }
    ul li:hover{
        opacity: 1;
    }
    ul li img{
        width: 300px;
        height: 188px;
    }
    @keyframes move {
        from{
            margin-left: 0;
        }
        to{
            margin-left: -1200px;
        }
    }
  </style>
</head>
<body>
<div>
    <ul>
        <li><img src="images/photo_1.jpg" alt=""></li>
        <li><img src="images/photo_2.jpg" alt=""></li>
        <li><img src="images/photo_3.jpg" alt=""></li>
        <li><img src="images/photo_4.jpg" alt=""></li>
        <!--无限滚动的特点:在需要轮播的图后面再加上一张或两张最开始的图片-->
        <li><img src="images/photo_1.jpg" alt=""></li>
        <li><img src="images/photo_2.jpg" alt=""></li>
    </ul>
</div>

</body>
</html>