<!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. iOS设置圆角的方法及指定圆角的位置

    在iOS开发中,我们经常会遇到设置圆角的问题, 以下是几种设置圆角的方法: 第一种方法: 通过设置layer的属性 代码: UIImageView *imageView = [[UIImageView ...

  2. spring aop使用

    最近做一个数据库分离的功能,其中用到了spring aop,主要思路就是在service层的方法执行前根据注解(当然也可以根据方法名称,如果方法名称写的比较统一的话)来判断具体使用哪个库.所以想着再回 ...

  3. .NET自带缓存机制实例

    using System;using System.Web;using System.Web.Caching;using System.Collections.Generic;using System ...

  4. webapp填坑记录[更新中]

    网上也有许多的 webapp 填坑记录了,这几个月,我在公司正好也做了2个,碰到了一些问题,所以我在这里记录一下我所碰到的问题: meta 头部声明在开发的时候,刚刚创建 HTML 文件,再使用浏览器 ...

  5. openGL光源概念

    1. 光照模型      环境光——经过多次反射而来的光称为环境光,无法确定其最初的方向,但当特定的光源关闭后,它们将消失. 全局环境光——每个光源都能对场景提供环境光.此外,还有一个环境光,它不来自 ...

  6. 翻译连载 | 附录 A：Transducing（下）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. Nosql简介 Redis，Memchche,MongoDb的区别

    本篇文章主要介绍Nosql的一些东西,以及Nosql中比较火的三个数据库Redis.Memchache.MongoDb和他们之间的区别.以下是本文章的阅读目录 一.Nosql介绍 1.Nosql简介 ...

  8. cardview和Palette，ActionBar颜色随图改变

    CardView是一个控件,Palette是取色工具(工具类),本文会对他们进行比较细致的介绍,相信机制的各位看完一定轻而易举地实现ActionBar随图改变的特效. 首先看一下效果图: Gradle ...

  9. var a=function(){...}与function a(){...}的区别

    var a = function(){...}在js预加载时按变量处理,即预加载定义,不加载赋值. function a(){...}即加载定义,而且赋值. 例如:a(); //正常执行a()函数; ...

  10. 安装 Qt 及所需 gcc 等

    嫌麻烦,下载离线安装包一次性装好 Qt 及 Qt Creator (Community) Qt 安装包下载地址 http://download.qt.io/official_releases/qt/ ...