<!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. PullToRefreshListView插件初次进入页面自动刷新

    只要将PullToRefreshListView源码中的: @Override protected void onRefreshing(final boolean doScroll) { /** * ...

  2. Oracle常用的数值函数，日期函数

    ---恢复内容开始--- 数值函数 常用的处理数值的函数有如下: No. 函数名 含义 1 round(x[,y]) 返回四舍五入后的值 2 trunc(x[,y]) 不会四舍五入 3 mod(x,y ...

  3. Weblogic之简介

    一.简介(来自百度百科)   WebLogic是美国Oracle公司出品的一个application server,确切的说是一个基于JAVAEE架构的中间件,WebLogic是用于开发.集成.部署和 ...

  4. 线性回归，附tensorflow实现

    本文同步自:https://zhuanlan.zhihu.com/p/30738405 本文旨在通过介绍线性回归来引出一些基本概念:h(x),J(θ),梯度下降法 有一组数据: x=[1,2,3,4, ...

  5. 2018届研究生招生预推免（THU,HIT）经历分享——guochengtao

    注:本文为作者原创文章,且为无偿分享,读者可以阅读,但请尊重劳动成果,勿作为商业用途!如对文章中的内容有意见或者出现了您不喜欢的言论,请您保留,谢谢合作! 又到一年12月,这代表着2017年已经接近尾 ...

  6. C语言之循环次数

    #include<stdio.h>int main(){int num,count=0,i=0,ret=0;scanf("%d",&num);while(num ...

  7. POJ2251-Dungeon Master

    题意:给出一三维空间的地牢,要求求出由字符'S'到字符'E'的最短路径移动方向可以是上,下,左,右,前,后,六个方向,每移动一次就耗费一分钟,要求输出最快的走出时间.不同L层的地图,相同RC坐标处是连 ...

  8. Azure 基础：使用 Traffic Manager 分流用户请求

    为了减少 web 服务器的宕机时间,同时也提高服务器的响应性能,我们往往部署多个站点并通过负载均衡来对外提供服务.Azure 提供的 Traffic Manager 服务属于负载均衡的一种,特点是工作 ...

  9. 【NOIP2013提高组】火柴排队

    https://www.luogu.org/problem/show?pid=1966 Σ(ai-bi)2=Σai2+Σbi2-2Σai*bi,要使Σ(ai-bi)2最小,则需2Σai*bi最大. 由 ...

  10. 对datatable进行简单的操作

    筛选出datatable中c_level=1的数据 dataRow[] rows = dt.Select("c_level=0"); 克隆表dt的结构到表dt,并将dt的数据复制到 ...