CSS学习笔记-动画模块

动画模块：
    1、过渡和动画之间的异同
        1.1不同点
            （1）过渡必须人为触发才能执行
            （2）动画不需要人为触发就可以执行
        1.2相同
            （1）过渡和动画都是可以用来给元素添加动画的
            （2）过渡和动画都是系统新增的一些属性
            （3）过渡和动画都需要满足三要素才有动画效果

    2、格式：
        2.1三要素：
            （1）告诉系统需要执行的动画名称

     animation-name:animation_name;

 

            （2）创建一个带名称的动画
             　　   ①第一种创建方式：

1　　 @keyframes animation_name {
2　　　　from{
3　　　　　　margin-left:0;
4　　　　}
5　　　　to{
6　　　　　　margin-left:100px;
7　　　　}　　
}

             　　   ②第二种创建方式：   

　　@keyframes animation_name{
  　　  0%{}
  　　  25%{}
  　　  .
   　　 . 
   　　 .
   　　 100%{}
　　}

 

            （3）告诉系统动画持续的时长：

     animation-duration:3s;

 

        2.2实例：

           <style>
               div{
                   height: 100px;
                   width: 200px;
                   background-color: red;
                   animation-name:animation_move;
                   animation-duration:5s;
               }


               @keyframes animation_move{
                   form{
                       margin-left:0;
                   }
                   to{
                       margin-left: 500px;
                   }
               }
           </style>    

      2.3注意点：
            （1)动画中如果有和默认样式中同名的属性，会覆盖默认样式中同名的属性
            （2)在编写动画的时候，固定不变的值写在前面，需要变化的值写在后面

  3、其他属性
        3.1延迟开始：

       animation-delay:2s;(默认0s)

   

　　  3.2速度曲线：

       animation-timing-function:linear;  (linear/ease/ease-in/ease-out/ease-in-out)

        3.3动画执行次数：

       animation-iteration-count:3;

            取值：
            （1）具体次数（数字）
            （2）特定名词：infinite（无穷）

 

        3.4是否往返动画：    

　　　　animation-direction:alternate;

            取值：
                normal:默认取值，不进行往返
                alternate:执行往返动画，且往返一次算作两次动画

 

        3.5控制动画执行与暂停

 　　　animation-play-state:running;

            取值：
                running:默认取值，正常执行动画
                paused:动画暂停

 

        3.6指定动画等待状态和结束状态的样式：

　　　　animation-fill-mode:none;

            取值：
                none:默认取值
                forwards:让元素结束状态的时候保持动画最后一帧
                backwards:让元素等待状态的时候显示动画第一帧
                both:同时实现forwards和backwards的效果

 

 

动画模块-连写：
    1、格式：

        animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;
        animation:   动画名称 动画持续时间　动画运动速度　延迟时间　执行次数　往返动画;

    2、简写：

　　　　 animation:animation-name animation-duration;

 

　　

本节专有词语：
    animation:    动画
    duration:    持续
    delay:        延迟时间
    function:    作用、功能
    iteration:  循环、重复
    infinite:    无限的
    direction:    方向
    normal:        正常的
    alternate:    交替、轮流
    paused:        暂停
    forwards:    向前、今后
    backwards:    向后