关键帧动画：@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. 在传统.NET Framework 上运行ASP.NET Core项目

    新的项目我们想用ASP.NET Core来开发,但是苦于我们历史的遗产很多,比如<使用 JavaScriptService 在.NET Core 里实现DES加密算法>,我们要估计等到.N ...

  2. requests的content与text导致lxml的解析问题

    title: requests的content与text导致lxml的解析问题 date: 2015-04-29 22:49:31 categories: 经验 tags: [Python,lxml, ...

  3. Python-Jenkins API使用 —— 在后端代码中操控Jenkins

    最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. Linux C ...

  4. 从备考PMP到与项目经理同呼吸

    前言 PMP是什么梗? 项目管理专业人士资格认证.它是由美国项目管理协会(Project Management Institute(PMI)发起的,严格评估项目管理人员知识技能是否具有高品质的资格认证 ...

  5. C#+HtmlAgilityPack+XPath带你采集数据(以采集天气数据为例子)

    第一次接触HtmlAgilityPack是在5年前,一些意外,让我从技术部门临时调到销售部门,负责建立一些流程和寻找潜在客户,最后在阿里巴巴找到了很多客户信息,非常全面,刚开始是手动复制到Excel, ...

  6. 谱聚类（spectral clustering）原理总结

    谱聚类(spectral clustering)是广泛使用的聚类算法,比起传统的K-Means算法,谱聚类对数据分布的适应性更强,聚类效果也很优秀,同时聚类的计算量也小很多,更加难能可贵的是实现起来也 ...

  7. 谈谈JS中的函数节流

    好吧,一直在秋招中,都没怎么写博客了...今天赶紧来补一补才行...我发现,在面试中,讲到函数节流好像可以加分,尽管这并不是特别高深的技术,下面就聊聊吧! ^_^ 备注:以下内容部分来自<Jav ...

  8. JS继承之借用构造函数继承和组合继承

    根据少一点套路,多一点真诚这个原则,继续学习. 借用构造函数继承 在解决原型中包含引用类型值所带来问题的过程中,开发人员开始使用一种叫做借用构造函数(constructor stealing)的技术( ...

  9. “RazorEngine.Templating.TemplateParsingException”类型的异常在 RazorEngine.NET4.0.dll 中发生，但未在用户代码中进行处理 其他信息: Expected model identifier.

    这个问题是由于在cshtml中 引用了model这个单词  它可能和Model在解析时有冲突. 解决方法:把model换成别的单词就可以了.

  10. Android中通过ActionBar为标题栏添加搜索以及分享视窗

    在Android3.0之后,Google对UI导航设计上进行了一系列的改革,其中有一个非常好用的新功能就是引入的ActionBar,他用于取代3.0之前的标题栏,并提供更为丰富的导航效果.Action ...