CSS学习笔记-动画模块

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

    二、格式：
        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　　　　}　　 8}

             　　   ②第二种建立方式：   

1 　　@keyframes animation_name{ 2  　　 0%{} 3  　　  25%{} 4  　　 . 5  　　 . 6  　　 . 7  　　 100%{} 8 　　}

 

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

 animation-duration:3s;

 

        2.2实例：

 1            <style>
 2  div{
 3  height: 100px;
 4  width: 200px;
 5  background-color: red;
 6  animation-name:animation_move;
 7  animation-duration:5s;
 8                }


 9  @keyframes animation_move{
10  form{ 11  margin-left:0;
12                    }
13  to{
14  margin-left: 500px;
15                    }
16  } 17            </style>    

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

  三、其余属性
        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的效果

 

 

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

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

    二、简写：

　　　　 animation:animation-name animation-duration;

 

　　

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