<!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. java多线程系列(九)---ArrayBlockingQueue源码分析

    java多线程系列(九)---ArrayBlockingQueue源码分析 目录 认识cpu.核心与线程 java多线程系列(一)之java多线程技能 java多线程系列(二)之对象变量的并发访问 j ...

  2. STM32F030如何正确配置IO口的复用功能

    本文所使用的单片机型号为STM32F030C8T6. 在030系列的单片机中,PA2引脚除了作为普通的IO引脚用作输入输出功能以外,还可以作为内部外设串口1,串口2,定时器15通道1这三个外设的功能引 ...

  3. android TransFormexecption 解决

    近期编译的时候遇到这个问题.... > com.android.build.api.transform.Transformexception: java.util.zip.ZipExceptio ...

  4. 2386:Lake Counting-poj

    总时间限制:  1000ms 内存限制:  65536kB 描述 Due to recent rains, water has pooled in various places in Farmer J ...

  5. 数字三角形-poj

    题目要求: 7 3 8 8 1 0 2 7 4 4 4 5 2 6 5 在上面的数字三角形中寻找在上面的数字三角形中寻找一条从顶部到底边的路径,使得路径上所经过的数字之和最大.路径上的每一步都只能往左 ...

  6. PHP yield 分析，以及协程的实现，超详细版(上)

    参考资料 http://www.laruence.com/2015/05/28/3038.html http://php.net/manual/zh/class.generator.php http: ...

  7. anaconda spyder异常如何重新启动

    电脑有一次断电,重新启动后anaconda的spyder就打不开了 重新启动spyder方法: 在anaconda安装目录的Scripts文件夹下,shift+右键在此窗口打开命令行,运行spyder ...

  8. thinkphp实现文件的下载

    首先需要看一下大家使用的Thinkphp的版本,不同的版本使用的方法不同,(在导入公共函数的时候方式不同) 我用的是thinkphp3.2.2版本的,因此直接使用import()函数,直接把使用thi ...

  9. jquery无new构建学习笔记

    当我们想要创建一个对象,我们可能使用new方法去构建一个对象,那按道理jquery也是一个对象,应该也是用new jquery()来构建呀为什么我们创建jquery对象不用new jquery()而是 ...

  10. lodash源码分析之chunk的尺与刀

    以不正义开始的事情,必须用罪恶使它巩固. --莎士比亚<麦克白> 最近很多事似乎印证了这句话,一句谎言最后要用一百句谎言来圆谎. 本文为读 lodash 源码的第二篇,后续文章会更新到这个 ...