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. 解决PHP无法接收post超过1000个字段的问题

    今天在做与后台交互的的过程中,发现php对于接收的POST有一个限制,超出1000个字段之后便无法接收,项目要求在不改变PHP配置的情况下通过前端方式解决,通过分析并且网上差一些大牛的资料终于找到了解 ...

  2. 【调试】JS断点调试

    1.断点调试是啥?难不难? 断点调试其实并不是多么复杂的一件事,简单的理解无外呼就是打开浏览器,打开sources找到js文件,在行号上点一下罢了.操作起来似乎很简单,其实很多人纠结的是,是在哪里打断 ...

  3. Java 并发编程中的 CountDownLatch 锁用于多个线程同时开始运行或主线程等待子线程结束

    Java 5 开始引入的 Concurrent 并发软件包里面的 CountDownLatch 其实可以把它看作一个计数器,只不过这个计数器的操作是原子操作,同时只能有一个线程去操作这个计数器,也就是 ...

  4. WdatePicker.js的使用方法 帮助文档 使用说明(时间控件)*转载

    4. 日期范围限制 静态限制 注意:日期格式必须与 realDateFmt 和 realTimeFmt 一致 你可以给通过配置minDate(最小日期),maxDate(最大日期)为静态日期值,来限定 ...

  5. ByteArrayInputStream的作用，和BufferedOutputStream 的区别

    个人好奇ByteArrayInputStream,到底是有什么用于是百度了一些资料 整合了下,********这两个类对于要创建临时性文件的程序以及网络数据的传输.数据压缩后的传输等可以提高运行的的效 ...

  6. scapy在wlan中的应用

    Scapy 又是scapy,这是python的一个网络编程方面的库,它在wlan中也有很强大的应用.一般我们买块网卡,然后aircrack-ng套件爆破一下邻居的密码,其实我们可以用scapy写一些有 ...

  7. [转] twemproxy ketama一致性hash分析

    评注:提到HAProxy业务层proxy, twemproxy存储的proxy. 其中还提到了ketama算法的实现源码 转自:http://www.cnblogs.com/basecn/p/4288 ...

  8. react 创建组件 （四）Stateless Functional Component

    上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Compo ...

  9. Java 递归解决 &quot;仅仅能两数相乘的计算器计算x^y&quot; 问题

    /** * 求一个数的乘方 * 求x^y,y是一个正整数. 设计算器仅仅能计算两数相乘,不能一次计算n个数相乘. * 知:2^5=(2^2)^2*2; 2^6=(2^2)^3=((4)^2)*4; 2 ...

  10. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第3章节--SharePoint 2013 开发者工具 使用Napa开发SharePoint应用程序         假设 ...