1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <link rel="stylesheet" type="text/css" href="style.css">
  7.  </head>
  8.  <body>
  9.      <div></div>
  10.  </body>
  11.  </html>
  1.  div{
  2.      width: 300px;
  3.      height: 200px;
  4.      background-color: red;
  5.      animation-name: myanimation;
  6.      animation-duration: 3s;
  7.      animation-timing-function: ease;
  8.      animation-delay: 1s;
  9.      animation-iteration-count:/*infinite*/;/*infinite一直播放*/
  10.      animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/
  11.      animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/
  12.      animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/
  13.  }
  14.  @keyframes myanimation{
  15.  /*    from{
  16.          width: 150px;
  17.          height: 100px;
  18.          background-color: blue;
  19.      }
  20.      to{
  21.          width: 200px;
  22.          height: 150px;
  23.          background-color: green;
  24.      }*/
  25.      0%{
  26.          margin-left: 20px;
  27.          background-color: pink;
  28.      }
  29.      20%{
  30.          margin-left: 100px;
  31.          background-color: orange;
  32.      }
  33.      40%{
  34.          margin-top: 100px;
  35.          background-color: yellow;
  36.      }
  37.      60%{
  38.          margin-top: 200px;
  39.          background-image: grey;
  40.      }
  41.      100%{
  42.          margin-right: 300px;
  43.          margin-top: 150px;
  44.          background:green;
  45.      }
  46.  }
  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <link rel="stylesheet" type="text/css" href="style.css">
  7.  </head>
  8.  <body>
  9.      <div><img src="img/鸟1.jpg"></div>
  10.  </body>
  11.  </html>
  1.  *{
  2.      margin:;
  3.      padding:;
  4.  }
  5.  img{
  6.      width: 200px;
  7.      height: 180px;
  8.      border:3px groove pink;
  9.      animation-name: myanimation;
  10.      animation-duration: 3s;
  11.      animation-delay: 1s;
  12.      animation-iteration-count:;
  13.      animation-fill-mode: both;
  14.  }
  15.  div{
  16.      /*background-color: red;*/
  17.      width: 200px;/*若无此句默认会左右充满屏幕，可以通过添加背景色观察到。*/
  18.      margin-left: auto;
  19.      margin-right: auto;/*此3句的作用是使div左右剧中*/
  20.      margin-top: 100px;
  21.      perspective: 600px;/*使子元素的动画效果具有立体感*/
  22.  }
  23.  @keyframes myanimation{
  24.      0%{
  25.          transform: rotateY(45deg);
  26.      }
  27.      50%{
  28.          transform: rotateX(180deg);
  29.      }
  30.      100%{
  31.          transform: rotateX(180deg);
  32.      }
  33.  }
  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title></title>
  6.      <link rel="stylesheet" type="text/css" href="style.css">
  7.  </head>
  8.  <body>
  9.      <div class="div2">
  10.          <h3><a href="">花</a></h3>
  11.          <div><img src="img/花1.jpg"></div>
  12.      </div>
  13.      <div class="div2">
  14.          <h3><a href="">草</a></h3>
  15.          <div><img src="img/草1.jpg"></div>
  16.      </div>
  17.      <div class="div2">
  18.          <h3><a href="">树</a></h3>
  19.          <div><img src="img/树1.jpg"></div>
  20.      </div>
  21.  </body>
  22.  </html>
  1.  *{
  2.      margin:;
  3.      padding:;
  4.  }
  5.  h3+div{/*兄弟选择器*/
  6.      height:;
  7.      overflow: hidden;/*隐藏div*/
  8.      transition: all 1s ease;
  9.  }
  10.  a{
  11.      text-decoration: none;/*去掉链接的下划线*/
  12.  }
  13.  .div2{
  14.      width: 600px;
  15.      background: rgba(90,60,30,0.1);
  16.      margin-left: 15px;
  17.      margin-top: 4px;
  18.  }
  19.  h3{
  20.      background:rgba(180,70,40,0.5);
  21.      border-radius: 1em;
  22.  }
  23.  .div2:hover h3+div{
  24.      height: 400px;
  25.      overflow: auto;
  26.  }

【CSS3】动画animation-关键帧keyframes的更多相关文章

  1. CSS3 动画 animation和@keyframes

    CSS3 @keyframes 规则 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规定某项 CSS 样式 ...

  2. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  3. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  4. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  5. CSS3动画animation认识，animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

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

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

  7. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  8. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  9. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  10. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

随机推荐

  1. Composer使用笔记

    安装 1.windows中安装Composer 一般来说,windows下安装composer有两种办法,一种是直接下载并运行Composer-Setup.exe,这种方法在中国似乎很难完成安装.另一 ...

  2. Python环境变量搭建

    1.首先下载相对应的Python版本,安装后在系统环境变量的path路径下加入安装的默认路径: 2.测试:dos命令下输入python.回车,然后测试,exit()退出来,测试完成.

  3. less简述

       什么是less? 一种 动态 样式 语言. LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, ...

  4. java中的static和final关键字

    一:static 1)修饰成员变量: static关键字可以修饰成员变量,它所修饰的成员变量不属于对象的数据结构,而是属于类的变量,通常通过类名来引用static成员. 当创建对象后,成员变量是存储在 ...

  5. 关于javascript removeChild的那些事

    关于javascript removeChild的那些事 今天给removeChild搞死了,弄了几个小时,上代码 <ul id="myList"> <li> ...

  6. weex 环境搭建

    最近为了项目需要(实际上是为了年底KPI),领导要求用3天时间,学习并使用weex开发一个页面,说实话,压力山大.在这之前压根儿就没听说过啊,一脸懵逼 无奈之余只能Google了,惊喜的发现weex的 ...

  7. Music Tags 隐私政策

    隐私政策 本应用尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本应用会按照本隐私权政策的规定使用和披露您的个人信息.但本应用将以高度的勤勉.审慎义务对待这些信息.除本隐 ...

  8. ASP.NET没有魔法——ASP.NET MVC使用Oauth2.0实现身份验证

    随着软件的不断发展,出现了更多的身份验证使用场景,除了典型的服务器与客户端之间的身份验证外还有,如服务与服务之间的(如微服务架构).服务器与多种客户端的(如PC.移动.Web等),甚至还有需要以服务的 ...

  9. php的过滤器功能

    1.简介 PHP 过滤器用于验证和过滤来自非安全来源的数据,比如用户的输入. 1.1 外部数据: 来自表单的输入数据 Cookies Web services data 服务器变量 数据库查询结果 1 ...

  10. em标签和strong标签的区别

    今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...