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. *Codeforces891E. Lust

    $n \leq 5000$的数列,$k \leq 1e9$次操作,每次随机选一个数-1,然后把其他数的积加入答案.问最后答案期望,$mod \ \ 1e9+7$. 略微观察可以发现答案=初始数列的积- ...

  2. 解析XML字符串为json对象

    var overtime='<?xml version="1.0" encoding="UTF-8"?><response><co ...

  3. hdu 5012 bfs 康托展开

    Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  4. hg下拉和上传代码

    1.从代码仓库克隆源代码:$ mkdir bzrobot_ws$ cd bzrobot_ws$ hg clone http://192.168.15.88/hg/bzrobot_src src$ ca ...

  5. Map类的三种实现 <个人练习>

    package cn.zmh.zuoye; import java.util.HashMap; import java.util.Iterator; import java.util.Map; imp ...

  6. 边看chromium的代码，边想骂人...

    这一年一直在看chromium for android的代码,边看边想骂,谷歌这帮人..一开始搞了个牛逼的架构,在安卓4.4上把以前android webkit团队的简单版替换掉了,结果发现性能大不如 ...

  7. 【转】Spring框架深入理解

    参考这篇文章: http://www.ibm.com/developerworks/cn/java/j-lo-spring-principle/ Spring内部分为Beans, Context 和 ...

  8. SolidEdge 如何由装配图快速进行标注和零件序号编写 制作BOM表

    点击"零件明细表",然后点击要生成序号的视图,然后点击前面两项(自动标号和放置清单),点击完成后效果如下图所示.   在点击完成之前,先点击他前面的一个按钮,取消勾选"项 ...

  9. [LeetCode][Java] Container With Most Water

    题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  10. webpack2 详解

    1.安装 npm install webpack -g npm install webpack -save-dev 2.编辑配置文件 // 引入 path var path=require('path ...