<!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. .net SignalR winform 推送广播

    最近在做一个项目,需要用到服务端主动推送给客户端,最开始用的是自己比较顺手的Remoting,可后来发现把服务端架到外网上,就猴子它哥了,后来又尝试WCF,虽然能推送,但是推了几次也猴子它哥了,后来找 ...

  2. python win32 简单操作

    源由 刚开始是帮朋友做一个按键精灵操作旺信的脚本,写完后各种不稳定:后来看到python可以操作win32相关的api,恰好这一段时间正在学习python,感觉练手的时候到了~~~ 下载 要注意Pyt ...

  3. Intellij IDEA热加载更新 IntelliJ IDEA热加载自动更新（Update classes and resources ）

    定义及分类 1.1 定义 在web开发环境下,所谓热部署,即在不重新部署webapp的情况下,实时将工程代码改动更新到web容器中(例如tomcat).其原理可以类比ajax的作用,即局部刷新工程资源 ...

  4. c语言的typedef

    一.typedef作用简介 1.作用:给已经存在的类型起一个新的名称 2.使用场合: 1> 基本数据类型 2> 指针 3> 结构体 4> 枚举 5> 指向函数的指针 * ...

  5. 2964:日历问题-poj

    2964:日历问题 总时间限制:  1000ms 内存限制:  65536kB 描述 在我们现在使用的日历中, 闰年被定义为能被4整除的年份,但是能被100整除而不能被400整除的年是例外,它们不是闰 ...

  6. Qt颜色下拉框

    上周为了用Qt写一个类似颜色下拉框的东西,查阅了网上的多数相关资料,依然没有我想要的.终于在周四的时候下定决心重写QCombobox类来实现功能,现在把它贴出来,望看到的人,批评指正.废话不多说,先上 ...

  7. is 和==的区别

    Python中的对象包含三要素:id.type.value.其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值.is判断的是a对象是否就是b对象,是通过id来判断的.==判断的 ...

  8. openstack高可用haproxy配置

    #openstack高可用haproxy配置openstack pike 部署 目录汇总 http://www.cnblogs.com/elvi/p/7613861.html #openstack高可 ...

  9. nignx 测试配置文件

    nginx -t nginx: the configuration file /usr/local/nginx-1.2.9/conf/nginx.conf syntax is ok nginx: co ...

  10. Selenium中如何使用xpath更快定位

    在学习Selenium路上,踩了也不少坑,这是我最近才发现的一个新写法,好吧,"才发现"又说明我做其他事了.对的,我现在还在加班! 开车~~~ 例子:知乎网 标签:Python3. ...