<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div></div>

 </body>

 </html>
 div{

     width: 300px;

     height: 200px;

     background-color: red;

     animation-name: myanimation;

     animation-duration: 3s;

     animation-timing-function: ease;

     animation-delay: 1s;

     animation-iteration-count:/*infinite*/;/*infinite一直播放*/

     animation-direction: alternate; /*normal*/;/*规定动画下一周期的播放顺序，即奇数次的播放顺序：normal默认顺序播放，alternate逆序播放*/

     animation-fill-mode: both;/*默认none，动画会停在初始状态。forwards属性值会使动画停在最后一帧状态。backwards会立即切换到第1帧再执行animation-delay延时。both会同时应用forwards和backwards属性值。*/

     animation: ;/*所有具体属性值都可以设置在简写属性名中，每个属性值之间用空格分隔*/

 }

 @keyframes myanimation{

 /*    from{

         width: 150px;

         height: 100px;

         background-color: blue;

     }

     to{

         width: 200px;

         height: 150px;

         background-color: green;

     }*/

     0%{

         margin-left: 20px;

         background-color: pink;

     }

     20%{

         margin-left: 100px;

         background-color: orange;

     }

     40%{

         margin-top: 100px;

         background-color: yellow;

     }

     60%{

         margin-top: 200px;

         background-image: grey;

     }

     100%{

         margin-right: 300px;

         margin-top: 150px;

         background:green;

     }

 }
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div><img src="img/鸟1.jpg"></div>

 </body>

 </html>
 *{

     margin:;

     padding:;

 }

 img{

     width: 200px;

     height: 180px;

     border:3px groove pink;

     animation-name: myanimation;

     animation-duration: 3s;

     animation-delay: 1s;

     animation-iteration-count:;

     animation-fill-mode: both;

 }

 div{

     /*background-color: red;*/

     width: 200px;/*若无此句默认会左右充满屏幕，可以通过添加背景色观察到。*/

     margin-left: auto;

     margin-right: auto;/*此3句的作用是使div左右剧中*/

     margin-top: 100px;

     perspective: 600px;/*使子元素的动画效果具有立体感*/

 }

 @keyframes myanimation{

     0%{

         transform: rotateY(45deg);

     }

     50%{

         transform: rotateX(180deg);

     }

     100%{

         transform: rotateX(180deg);

     }

 }
 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <div class="div2">

         <h3><a href="">花</a></h3>

         <div><img src="img/花1.jpg"></div>

     </div>

     <div class="div2">

         <h3><a href="">草</a></h3>

         <div><img src="img/草1.jpg"></div>

     </div>

     <div class="div2">

         <h3><a href="">树</a></h3>

         <div><img src="img/树1.jpg"></div>

     </div>

 </body>

 </html>
 *{

     margin:;

     padding:;

 }

 h3+div{/*兄弟选择器*/

     height:;

     overflow: hidden;/*隐藏div*/

     transition: all 1s ease;

 }

 a{

     text-decoration: none;/*去掉链接的下划线*/

 }

 .div2{

     width: 600px;

     background: rgba(90,60,30,0.1);

     margin-left: 15px;

     margin-top: 4px;

 }

 h3{

     background:rgba(180,70,40,0.5);

     border-radius: 1em;

 }

 .div2:hover h3+div{

     height: 400px;

     overflow: auto;

 }

【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. javaweb-1-B/S初论

    一.B/S结构的基本概念 1.什么是动态网页 2.为什么需要动态网页 3.如何实现动态网页 4.为什么学习B/S技术 4.1C/S结构 优点: 1.C/S架构的界面和操作可以很丰富. 2.安全性能可以 ...

  2. 对java泛型的理解

    正确的应用java泛型的特性可以更好的实现编程的开闭原则(对扩展开放,对修改关闭),这得益于java泛型提供的在程序运行时获取对象声明类型的特性. 静态语言的特性是在程序编译前进行声明,这样程序在编译 ...

  3. sqoop的导入导出

    1.知道某列的值的增量导入(mysql------>文件) bin/sqoop import \--connect jdbc:mysql://bigdatcdh01:3306/test \--u ...

  4. OC的内存管理和@class

    1. 基本原理 1. 什么是内存管理 ➢ 移动设备的内存极其有限,每个app所能占用的内存是有限制的 ➢ 当app所占用的内存较多时,系统会发出内存警告,这时得回收一些不需要再使用的内存空间.比如回收 ...

  5. Python之登录接口

    要求 1.输入用户名密码2.认证成功后显示欢迎信息3.输错三次后锁定 思路 没有数据库,这里使用本地文件,一共需要两个文件:       黑名单的文件:黑名单里检测,不让登录     用户信息文件:将 ...

  6. jsp运行原理及运行过程

    JSP的执行过程主要可以分为以下几点: 1)客户端发出请求. 2)Web容器将JSP转译成Servlet源代码. 3)Web容器将产生的源代码进行编译. 4)Web容器加载编译后的代码并执行. 5)把 ...

  7. java 之 抽象工厂模式（大话设计模式）

    看了几次抽象工厂模式,每次查看都需要重新理解一次,可能是涉及的类和接口比较多,所以比较难缕清的关系吧!在笔者看来,我们还是要吸取其思想而不是生搬硬套. 来看下类图: 大话设计模式-类图 看类图已经很乱 ...

  8. python并发编程之多进程二

    一,multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...

  9. 初识CSS

    css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...

  10. tyvj4877 组合数

    1．组合数 (zero.cpp/c/pas) 时间限制:1s 内存限制:256MB [问题描述] 从m个不同元素中,任取n(n≤m)个元素并成一组,叫做从m个不同元素中取出n个元素的一个组合:从m个不 ...