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. MySQL导出数据库、数据库表结构、存储过程及函数【用】

    一.导出数据库 我的mysql安装目录是D:\Program Files\MySQL\MySQL Server 5.5\bin\,导出文件预计放在D:\sql\ 在mysql的安装目录执行命令: my ...

  2. msp430项目编程35

    msp430中项目---nand接口编程35 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结

  3. Laravel 视图中的url

    <a href="{{ url('url') }}">url</a> <a href="{{ action('StudentControll ...

  4. (3)Swing常用组件

    JTextField-文本框 继承自javax.swing.text.JTextComponent类

  5. 如何使用NSOperations和NSOperationQueues 第二部分

    这篇文章还可以在这里找到 英语 以下是对上面代码的注解: 导入PhotoRecord.h文件,这样你就可以在下载成功后,单独地设置PhotoRecord变量的图片属性(image property). ...

  6. 【flyway】Exception encountered during context initialization - cancelling refresh attempt: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'flywayInitializer' def

    报错如下: "2018-03-20 12:58:09.585 WARN 18026 — [ restartedMain] ConfigServletWebServerApplicationC ...

  7. 【转】Linux cp -a用法

    cp file1 file1-bk  ---------> 这样复制备份的话文件的属性(创建时间这些会变化) 要想不变化, cp -a  file1 file-bk  加上一个 -a 这个参数就 ...

  8. 一根数据线玩转树莓派Zero

    0. 前言 原创文章,转载引用务必注明链接.水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnb ...

  9. 2014MadCon厦门分享会-笔记（下）

    32 <如何与百度互动,不知道这些就不要做SEO了>百度站长平台资深产品运营师 曹丽丽(飞鸟) 33 注意百度站长平台的提醒.如果你不留电话,不留其他联系方式,出问题了,百度怎么提醒你呢? ...

  10. location.href用法总结

    javascript中的location.href有很多种用法,主要如下. self.location.href=”/url” 当前页面打开URL页面 location.href=”/url” 当前页 ...