学习任务

     制作含有动画的网页

学习目标

     熟悉动画属性的参数，学会动画属性的使用。

观看视频

素材下载

点击此处下载素材

知识要点

 在CSS3中，使用@keyframes规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。

    1. @keyframes语法格式

      @keyframes  animation-name {

          keyframes-selector{css-styles;}

        }

    例如：定义一个渐入动画

      @keyframes appear{

      from{opacity:0;}

      to{opacity:1;}

        }

   2.animation属性

      animation-name                   动画名称

      animation-duration               动画持续时间

      animation-timing-function     动画的速度曲线

      animation-delay                    动画执行前的延迟时间

      animation-iteration-count      动画的播放次数

      animation-direction               动画播放的方向

     例如：

     animation:appear 5s linear 0s infinite normal;

  课件下载

    点击此处下载课件

  拓展资源

    “跳动的文字”案例