关键帧动画：@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. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  2. 【Machine Learning】KNN算法虹膜图片识别

    K-近邻算法虹膜图片识别实战 作者:白宁超 2017年1月3日18:26:33 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本系列文章是作者结 ...

  3. .NET 提升教育 第一期：VIP 付费课程培训通知！

    为响应 @当年在远方 同学的建议,在年前尝试进行一次付费的VIP培训. 培训的课件:点击下载培训周期:10个课程左右,每晚1个半小时培训价格:1000元/人.报名方式:有意向的请加QQ群:路过秋天.N ...

  4. C语言 · Anagrams问题

    问题描述 Anagrams指的是具有如下特性的两个单词:在这两个单词当中,每一个英文字母(不区分大小写)所出现的次数都是相同的.例如,"Unclear"和"Nuclear ...

  5. ASP.NET Core的路由[3]：Router的创建者——RouteBuilder

    在<注册URL模式与HttpHandler的映射关系>演示的实例中,我们总是利用一个RouteBuilder对象来为RouterMiddleware中间件创建所需的Router对象,接下来 ...

  6. .net Elasticsearch 学习入门笔记

    一. es安装相关1.elasticsearch安装  运行http://localhost:9200/2.head插件3.bigdesk插件安装(安装细节百度:windows elasticsear ...

  7. Oracle数据库该如何着手优化一个SQL

    这是个终极问题,因为优化本身的复杂性实在是难以总结的,很多时候优化的方法并不是用到了什么高深莫测的技术,而只是一个思想意识层面的差异,而这些都很可能连带导致性能表现上的巨大差异. 所以有时候我们应该先 ...

  8. ASP.NET Core 中文文档 第四章 MVC（4.6）Areas（区域）

    原文:Areas 作者:Dhananjay Kumar 和 Rick Anderson 翻译:耿晓亮(Blue) 校对:许登洋(Seay) Areas 是 ASP.NET MVC 用来将相关功能组织成 ...

  9. springmvc 多数据源 SSM java redis shiro ehcache 头像裁剪

    获取下载地址   QQ 313596790  A 调用摄像头拍照,自定义裁剪编辑头像 B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技术:31359679 ...

  10. Android AndroidRuntime类

     AndroidRuntime类是安卓底层很重要的一个类,它负责启动虚拟机以及Java线程,AndroidRuntime类在一个进程中只有一个实例对象保存在全局变量,gCurRuntime中.