html5--6-55 动画效果-关键帧动画

实例

 @charset="UTF-8";

 div{

     width: 150px;

     height: 150px;

     font-size: 24px;

     background: rgba(160,30,12,0.9);

     animation-name:mydh;

     animation-duration:1s;

     animation-timing-function:linear;

     animation-delay:0.2s;

     animation-iteration-count:infinite;

 }

 @keyframes mydh{

 /*    动画的起点*/

 /*

     from{

         margin-left: 50px;

         background: green;

     }

 */

 /*    动画的终点*/

 /*

     to{

         margin-left: 300px;

         background: blue;

     }

 */

     0%{

         margin-left: 50px;

         background: green;    //相当于动画影片的开场剧情

     }

     100%{

         margin-left: 300px; //相当于动画影片的大结局

         background: blue;

     }

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>6-54课堂演示</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

       <div>关键帧动画</div>

 </body>

 </html>

 @charset="UTF-8";

 div{

     width: 150px;

     height: 150px;

     font-size: 24px;

     background: rgba(160,30,12,0.9);

     animation: mydh 2s ease 0s 2 alternate;

 /*    animation-name:mydh;

     animation-duration:2s;

     animation-timing-function:linear;

     animation-delay: 1s;

     animation-iteration-count:1;

     animation-direction: alternate;

     animation-fill-mode:both;    */

 }

 @keyframes mydh{

     0%{

        margin-top: 50px;

        background: green;              //相当于动画影片的开场剧情

     }

     50%{

           margin-top: 150px;

           margin-left: 300px;           //相当于动画影片中间的其他剧情

           background: red;

     }

     100%{

         margin-top: 300px;

         margin-left: 50px;          //相当于动画影片的大结局

         background: blue;

     }

 }

 -webkit-animation;

 -moz-animation;

 -ms-animation;

 -o-animation;

 animation;

学习要点

  • 掌握动画的实现和应用

CSS3 动画属性：

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

    1. @keyframes 设定动画规则。可以近似理解为动画的剧本。

      • name 必需。定义动画的名称。
      • 0-100%/from...to... 必需。动画时长的百分比。
      • 需要变化的 CSS 样式属性:必需。
    1. animation 所有动画属性的简写属性，用于设置六个动画属性：animation-name/animation-duration/animation-timing-function/animation-delay/animation-iteration-count/animation-direction
    1. animation-name 属性为 @keyframes 动画规定名称。若设置为none则覆盖已有的动画效果。
    1. animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
    1. animation-timing-function 规定动画的速度曲线。默认是 "ease"。

      • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
      • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
      • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
      • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
      • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
      • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
    1. animation-delay 规定动画何时开始。默认是 0。
    1. animation-iteration-count 规定动画被播放的次数。默认是 1。infinite为无限次播放。
    1. animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal 顺向播放"。/ alternate 动画应该轮流反向播放。
    1. animation-play-state 规定动画是否正在运行或暂停（结合js代码控制暂停）。默认是 "running 规定动画正在播放。"。/paused 规定动画暂停。
    2. animation-fill-mode（最后一帧停的位置） 规定对象动画时间之外的状态。
      • none 不改变默认行为。
      • forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
      • backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
      • both 向前和向后填充模式都被应用。

html5--6-55 动画效果-关键帧动画的更多相关文章

  1. ios基础动画、关键帧动画、动画组、转场动画等

    概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

  2. 核心动画基础动画(CABasicAnimation)关键帧动画

    1.在iOS中核心动画分为几类: 基础动画(CABasicAnimation) 关键帧动画(CAKeyframeAnimation) 动画组(CAAnimationGroup) 转场动画(CATran ...

  3. IOS开发-属性动画和关键帧动画的使用

    CAMediaTiming是一个协议(protocol),CAAnimation是所有动画类的父类,但是它不能直接使用,应该使用它的子类. 继承关系: CoreAnmiation 核心动画 简写CA ...

  4. iOS:核心动画之关键帧动画CAKeyframeAnimation

    CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能 ...

  5. WPF动画之关键帧动画(2)

    XAML代码: <Window x:Class="关键帧动画.MainWindow" xmlns="http://schemas.microsoft.com/win ...

  6. jQuery 动画效果 与 动画队列

    基础效果 .hide([duration ] [,easing ] [,complete ]) 用于隐藏元素,没有参数的时候等同于直接设置 display 属性 $('.target').hide() ...

  7. Object-C 里面的animation动画效果,核心动画

    #import "CoreAnimationViewController.h" @interface CoreAnimationViewController ()@property ...

  8. 11.css3动画--自定义关键帧动画--@keyframes/animation

    @keyframes设定动画规则,可以理解为动画的剧本. Name.自定义一个动画名称. 0-100%/from...to.... 需要变化的css样式属性. animation所有动画属性的简写.( ...

  9. iOS开发UI篇—核心动画(关键帧动画)

    转自:http://www.cnblogs.com/wendingding/p/3801330.html iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimatio ...

随机推荐

  1. java多线程总结一：线程的两种创建方式及比较

    1.线程的概念:线程(thread)是指一个任务从头至尾的执行流,线程提供一个运行任务的机制,对于java而言,一个程序中可以并发的执行多个线程,这些线程可以在多处理器系统上同时运行.当程序作为一个应 ...

  2. msp430项目编程57

    msp430综合项目---扩展项目七57 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  3. centos7 搭建hadoop

    参考文档:http://blog.csdn.net/xiaoxiangzi222/article/details/52757168 https://waylau.com/centos-7-instal ...

  4. LightOJ1234 Harmonic Number 调和级数求和

    [题目] [预备知识] ,其中r是欧拉常数,const double r= 0.57721566490153286060651209; 这个等式在n很大 的时候 比较精确. [解法]可以在 n较小的时 ...

  5. linux下查看cpu使用情况

    1.在终端输入top 2.ubuntu系统自带有system monitor 3.sudo apt-get install sysstat 然后在终端输入:mpstat

  6. java实现简单的算法

    排序大的分类可以分为两种:内排序和外排序.在排序过程中,全部记录存放在内存,则称为内排序,如果排序过程中需要使用外存,则称为外排序.下面讲的排序都是属于内排序. 内排序有可以分为以下几类: (1).插 ...

  7. Camtasia Studio录制屏幕字迹不清晰的原因

    Camtasia Studio这是一个很优秀的屏幕录像软件,功能强大且录制效果出色,支持众多格式输出: 之前一直用它录制视频的都很正常,但这次换系统后再重新安装后录制视频时,发现输出的视频画质不佳,文 ...

  8. R12: How to add Microsoft Excel as Type to the Create Template List of Values in BI Publisher (Doc ID 1343225.1)

    Modified: 27-Oct-2013 Type: HOWTO In this Document Goal Solution References APPLIES TO: BI Publisher ...

  9. Android访问网络数据的几种方式Demo

    Android应用经常会和服务器端交互,这就需要手机客户端发送网络请求,下面介绍四种常用网络请求方式,我这边是通过Android单元测试来完成这四种方法的,还不清楚Android的单元测试的同学们请看 ...

  10. BUPT复试专题—统计时间间隔(2013计院)

    题目描述 给出两个时间(24小时制),求第一个时间至少要经过多久才能到达第二个时间.给出的时间一定满足的形式,其中x和y分别代表小时和分钟.0≤x<24,0≤y<60. 输入格式 第一行为 ...