关键帧动画：@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. 浅谈WEB页面提速（前端向）

    记得面试现在这份工作的时候,一位领导语重心长地谈道——当今的世界是互联网的世界,IT企业之间的竞争是很激烈的,如果一个网页的加载和显示速度,相比别人的站点页面有那么0.1秒的提升,那也是很大的一个成就 ...

  2. C# 中参数验证方式的演变

    一般在写方法的时候,第一步就是进行参数验证,这也体现了编码者的细心和缜密,但是在很多时候这个过程很枯燥和乏味,比如在拿到一个API设计文档的时候,通常会规定类型参数是否允许为空,如果是字符可能有长度限 ...

  3. Socket聊天程序——初始设计

    写在前面: 可能是临近期末了,各种课程设计接踵而来,最近在csdn上看到2个一样问答(问题A,问题B),那就是编写一个基于socket的聊天程序,正好最近刚用socket做了一些事,出于兴趣,自己抽了 ...

  4. （系统架构）标准Web系统的架构分层

    标准Web系统的架构分层 1.架构体系分层图 在上图中我们描述了Web系统架构中的组成部分.并且给出了每一层常用的技术组件/服务实现.需要注意以下几点: 系统架构是灵活的,根据需求的不同,不一定每一层 ...

  5. WinForm 天猫2013双11自动抢红包【源码下载】

    1. 正确获取红包流程 2. 软件介绍 2.1 效果图: 2.2 功能介绍 2.2.1 账号登录 页面开始时,会载入这个网站:https://login.taobao.com/member/login ...

  6. 理解 .NET Platform Standard

    相关博文:ASP.NET 5 Target framework dnx451 and dnxcore50 .NET Platform Standard:https://github.com/dotne ...

  7. 设计模式之结构类模式大PK

                                      结构类模式大PK 结构类模式包括适配器模式.桥梁模式.组合模式.装饰模式.门面模式.享元模式和代理模式.之所以称其为结构类模式,是因 ...

  8. 代码的坏味道（21）——中间人(Middle Man)

    坏味道--中间人(Middle Man) 特征 如果一个类的作用仅仅是指向另一个类的委托,为什么要存在呢? 问题原因 对象的基本特征之一就是封装:对外部世界隐藏其内部细节.封装往往伴随委托.但是人们可 ...

  9. 「译」JUnit 5 系列：条件测试

    原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...

  10. java中的移位运算符：<<,>>,>>>总结

    java中有三种移位运算符 <<      :     左移运算符,num << 1,相当于num乘以2 >>      :     右移运算符,num >& ...