关键帧动画：@keyframes：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

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

         <style type="text/css">

             .div1{

                 width: 200px;

                 height: 200px;

                 background: yellow;

                 /*关键帧动画的调用*/

                 /*1.动画名:作用告诉系统使用哪一组动画*/

                     animation-name: candy,hou2;

                 /*2.动画的持续时长*/

                     animation-duration:  1s,2s;

                 /*上述两个属性必须要有*/

                 /*3.变化曲线*/

                     animation-timing-function: ease-in-out;

                 /*4.推迟时长*/

                     animation-delay: 2s;

                 /*5.重复次数

                      infinite:一直重复,(开始设置延迟再重复时就不会有延迟)*/

                 animation-iteration-count: 4;

                 /*6.动画方向

                      normal:正方向

                      reverse:反方向

                      alternate:次数为奇数时,正方向;为偶数时,反方向

                      alternate-reverse:次数为奇数时,反方向;为偶数时,正方向 */

                     animation-direction: alternate;

                 /*7.动画完成时的状态

                      backwards:动画完成时,保持动画开始之前的状态

                      forwards:动画完成时,保持动画结束之后的状态

                      both:同时向前向后,表现形式跟forwards一样 */

                     animation-fill-mode:forwards;

                 }

             /*声明一组关键帧动画*/

             @keyframes candy{

                 /* from:表示起点

                     to:表示终点*/

                 from{

                     opacity: 1;

                     /*width: 500px;*/

                 }

                 to{

                     opacity: 0;

                     /*width: 200px;*/

                 }

             }

             @keyframes hou2{

                 from{

                     height: 200px;

                 }

                 to{

                     height: 500px;

                 }

             }        

             /**/

             .div2{

                 width: 200px;

                 height: 200px;

                 background: red;

                 margin: 100px auto;

                 animation: heart 1s linear /*infinite*/,candy 1s /*infinite*/;

             }

             @keyframes heart{

                 0%{

                     transform: scale(1,1);

                 }

                 20%{

                     transform: scale(1.3,1.3);

                 }

                 50%{

                     transform: scale(2,2);

                 }

                 80%{

                     transform: scale(1.3,1.3);

                 }

                 100%{

                     transform: scale(1,1);

                 }

             }

         </style>

     </head>

     <body>

         <!--关键帧动画

                 在使用关键帧动画之前,我们得先声明一组关键帧动画,使用@keyframes进行声明

                 2.声明完成之后,要在该标签的样式中,通过animation使用该组动画

         -->

         <div class="div1"></div>

         <div class="div2"></div>

     </body>

 </html>

关键帧动画：@keyframes的更多相关文章

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

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

  2. Windows Store App 关键帧动画

    关键帧动画和插值动画类似,同样可以根据目标属性值的变化产生相应的动画效果,不同的是,插值动画是在两个属性值之间进行渐变,而关键帧动画打破了仅通过两个属性值控制动画的局限性,它可以在任意多个属性值之间进 ...

  3. Silverlight动画的基本知识、关键帧动画

    基础知识 (一)动画:是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉 (二)动画类型:两类    (1)From/To/By动画:在起始值和结束值之间进行动画处理.     ...

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

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

  5. 《Programming WPF》翻译 第8章 4.关键帧动画

    原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这 ...

  6. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  7. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  8. less 写关键帧动画

    @keyframes 关键帧动画写在less里的时候,务必要写在所有的{}之外,不能被{}包裹 甚至务必写在代码的最后 不然报错 Compilation resulted in incorrect C ...

  9. WPF中的动画——（五）关键帧动画

    与 From/To/By 动画类似,关键帧动画以也可以以动画形式显示目标属性值. 和From/To/By 动画不同的是, From/To/By 动画只能控制在两个状态之间变化,而关键帧动画则可以在多个 ...

随机推荐

  1. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  2. 算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序（Swift3.0版）

    本篇博客中的代码实现依然采用Swift3.0来实现.在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找.折半查找.插值查找.Fibonacci查找,还包括数结构的二叉排序树以 ...

  3. php实现的分页类

    php分页类文件: <?php /** file: page.class.php 完美分页类 Page */ class Page { private $total; //数据表中总记录数 pr ...

  4. Windows下Visual studio 2013 编译 Audacity

    编译的Audacity版本为2.1.2,由于实在windows下编译,其源代码可以从Github上取得 git clone https://github.com/audacity/audacity. ...

  5. C#反序列化XML异常：在 XML文档(0, 0)中有一个错误“缺少根元素”

    Q: 在反序列化 Xml 字符串为 Xml 对象时,抛出如下异常. 即在 XML文档(0, 0)中有一个错误:缺少根元素. A: 首先看下代码: StringBuilder sb = new Stri ...

  6. C# 数组的交集、差集、并集

    C# 数组的交集.差集.并集 工作中经常会用这方面的知识来检查那些字段是必须输入的,那些是禁止输入. using System; using System.Collections.Generic; u ...

  7. HTML5 Page Visibility

    什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page ...

  8. javascript arguments(转)

    什么是arguments arguments 是是JavaScript里的一个内置对象,它很古怪,也经常被人所忽视,但实际上是很重要的.所有主要的js函数库都利用了arguments对象.所以agru ...

  9. 去IOE的一点反对意见以及其他

    某天在机场听见两老板在聊天,说到他们目前销售的报表老跟不上的问题,说要请一个人,专门合并和分析一些发过来的excel表格,我真想冲上去说,老板,你需要的是一个信息处理的系统,你需要咨询么.回来一直耿耿 ...

  10. android Notification介绍

    如果要添加一个Notification,可以按照以下几个步骤 1:获取NotificationManager: NotificationManager m_NotificationManager=(N ...