第十三章 动画

一,触发式动画

什么是触发式动画呢?
触发式动画也就是被动动画,是需要动作才能触发。

今天的动画效果演示的效果不太好,大多数都会是文字了。动画的图片无法演示。

•  transition:property:all;           属性名 all是全部属性
  

•  transition:duration:1s;           过渡时间   就是整个动作完成的总时间
  

•  transition:delay:2s ;             延迟效果,当鼠标放上去两秒之后动画生效 为负数提前触发
  

•  transition-timing-function:linear(匀速) 贝塞尔曲线 也就是动画的运动轨迹
                               ease 先慢再快(默认值)
                               ease-in 匀加速
                               ease-out 匀减速
                               ease -in-out 先加速再减速
                               **x轴代表时间   y轴表示距离**
  

一个动画的要素一定有 : 起点位置 时间 终点位置

当然这是一个复合属性,可以分开写也可以在一起写:

•  复合样式
    transition:all 1s linear 2s
              属性名  时间  贝塞尔曲线  是否延迟2s
  

---

二,主动式动画

•         animation-name:username; 名称   这个是必须要取名字的,
  

•          animation-duration:3s; 过渡时间
  

•          animation_delay:1s;    延迟时间
  

•          animation-iteration-count:3; 执行次数  infinite执行无数次
  

•          transition-timing-function:linear  贝赛尔曲线
  

•          nimation-direction:reverse;  反方向播放
  

•            animation-play-state:paused;    动画暂停
  

---

仅仅设置上面这些是不能够触发动画,还需要有一个必须的引用
制作动画的关键帧 @keyframes + 前面动画取的名字

            @keyframes username{

                from{
                    left:0px;
                }
                to{
                    left:1000px
                }
            }

上面的代码就是从左到1000px。
或也可以用百分比来进行

 @keyframes username {
                0%{
                    left:0px;
                    top:0px;
                }
                25%{
                    left:500px;
                    top:0px
                }
            }

同样他也是一个复合属性

•            animation:username 3s linear 1s   (顺序可以随便写)
  

---

如何让图片动起来,要插入关键帧

写法:插入关键帧
animation-timing-function:step(7) 一般几张图片是插入几帧

---