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. Scrapy学习-7-数据存储至数据库

    使用MySQL数据库存储 安装mysql模块包 pip install mysqlclient 相关库文件 sudo apt-get install libmysqlclient-devel sudo ...

  2. laravel控制器

    //访问MemberController下的info的方法 //方法一//访问路径http://localhost/Laravel/public/member/infoRoute::get('memb ...

  3. .net core 使用 codegenerator 创建默认CRUD代码

    dotnet.exe aspnet-codegenerator controller --force --controllerName [controller-name] --relativeFold ...

  4. (1)Swing创建窗体

    本系列使用Intellij IDEA 2017.3.4版本 一.运行窗体 1. 2. 3. 4. 5. 6. 给JPanel起个名字 -如From 7. 8. 9. 生成 import javax.s ...

  5. 学习技术的三部曲：WHAT、HOW、WHY

    ★第一步:WHAT 所谓的“WHAT”也就是“What is it?”——这是最简单的层次.在这个层次,你要搞清楚某个东东是[什么]样子的?有[什么]用处?有[什么]特性?有[什么]语法?...... ...

  6. jquery的固定定位效果

    今天做了个固定定位的效果.比如对导航需要进行固定定位效果: 当没有滚动到导航下面,导航正常显示. 当滚动到导航下面,导航就固定到顶部. 这个效果使用了jquery的方法实现,具体思路为: 1)首先获取 ...

  7. Ionic 学习笔记

    本文为原创,转载请注明出处: cnzt       文章:cnzt-p http://www.cnblogs.com/zt-blog/p/7831153.html 注: 本篇学习笔记基于Ionic 3 ...

  8. 【spring boot】mybatis启动报错：Consider defining a bean of type 'com.newhope.interview.dao.UserMapper' in your configuration. 【Mapper类不能被找到】@Mapper 和@MapperScan注解的区别

    启动报错: 2018-05-16 17:22:58.161 ERROR 4080 --- Disconnected from the target VM, address: '127.0.0.1:50 ...

  9. Map与object的区别

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 语法 new Map([iterable]) 参数 iterable Iterable 可以是一个数组或者其他 itera ...

  10. 【Todo】UDP P2P打洞原理

    参考以下两篇文章: https://my.oschina.net/ososchina/blog/369206 http://m.blog.csdn.net/article/details?id=666 ...