44、动画-CSDN博客

本文链接：https://blog.csdn.net/MoonNight608/article/details/107485364

文章目录

介绍
动画
- 练习
- 动画补充

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

动画

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    height:800px;
    background-color:silver;
    overflow:hidden;
}
.box1 div{
    width:100px;
    height:100px;
    margin-bottom:100px;
    margin-left:0
}


1、动画和过渡类似，都是可以是实现一些动态的效果
      不同的是过渡需要在某个属性发生变化时才会触发
      动画可以自动触发动态效果
     设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤
    
@keyframes test{

   1、from 表示动画的开始位置 也可以使用0%
   from{
        margin-left:0;
    }
    
    2、to 表示动画的结束位置 也可以使用100%
    to{
        margin-left:700px;
    }
}

.box2{
    background-color:#bfs;
    /* 设置box2的动画 */
   1、 animation-name：要对当前元素生效的关键帧的名字 
    animation-name:test;
    
   2、animation-duration 动画的执行时间
    animation-duration:2s;
    
  3、animation-delay 设置动画的延迟
    animation-delay:2s;
    
    
  3、 animation-iteration-count 动画执行的次数
       可选值：
         1、设定次数
         2、infinite 无限次执行
    */
    animation-iteration-count:infinite；
    
   
  4、animation-direction:
        指定动画运行的方向
        可选值：
          默认值 normal      从from 向 to 运行 每次都是这样
          reverse           从 to   向 from 运行，每次都是这样
          alternate         从from 向 to执行，重复执行动画时反向执行
          alternate-reverse 从to向from执行重复执行动画时反向执行
              
    animation-direction:alternate-reverse;
    
 5、animation-play-state 设置动画的执行状态
       可选值：
          running 默认值 动画执行
          paused 动画暂停
   
    animation-play-state:paused  ;
    
  
 6、animation-fill-mode 动画的填充模式
        可选值：
          none       默认值 动画执行完毕元素回到原来的位置
          forwards   动画执行完毕，元素会停止在动画结束的位置
          backwards  动画延迟等待时，元素就会处于开始位置
          both 结合了 forwards 和backwards
   
    animation-fill-mode:both;
    
7、动画的简写属性  时间在前 延迟在后
    animation:test 2s 2s;
}

</style>
<body>
<div class="box1">
  <div class="box2"></div>
</div>

</body>
</html>

练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    width:256;
    height:256px;
    margin:0 auto;
    background-image:url("");
    animation:run 2s steps(6) infinite;
}
@keyframes run{
    from{
        background-position:0 0;
    }
    to{
        background-position:-1536 0;
    }
}
</style>
<body>
<div class="box1">
  <div class="box2"></div>
</div>

</body>
</html>

动画补充

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.outer{
    height:500px;
    border-bottom:10px black solid;
    margin:50px auto;
    /* 防止外边距重叠 */
    overflow:hidden
}
.box1{
    width:100px;
    height:100px;
    border-radius:50%;
    background-color:#bfa;
    animation:ball 1s forwards ease-in;
}
/* 创建小球下落的动画 */
@keyframe ball{
    from{
        margi-top:0;
    }
    33%,to{
        margin-top:400px;
        animation-timing-function:ease-in;
    }
    66%{
        margin-top:100px;
    }
}

</style>
<body>
<div class="outer">
   <div class="box1">
   </div>
</div>


</body>
</html>