<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animation制作复杂帧动画</title>
<style>
body{
background-color: rgba(163, 207, 255, 0.69);
}
a:link{
color: #ff5ee6;
}
h4,dt,div{
font: bold 16px "微软雅黑";
}
dt{
display: inline;
float: left;
}
div{
width:130px;
height: 130px;
text-align: center;
line-height: 130px;
color: #fff;
cursor: pointer;
/*指定div的通用样式属性，*/
background: rgba(108, 112, 255, 0.85);
/*同时也有变换前的效果*/
-webkit-border-radius:24px;
-moz-border-radius:24px;
border-radius:24px;
}
@-webkit-keyframes bjcolor {
/*webkit内核兼容模式下的帧集合 自定义名称*/
0%{background-color: rgba(108, 112, 255, 0.85);}/*开始帧*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整个动画运行到40%处时*/
50%{background-color: rgba(255, 193, 98, 0.85);}
75%{background-color: rgba(255, 133, 198, 0.85);}
100%{background-color: rgba(108, 112, 255, 0.85);}/*结束帧（开始和结束帧是必须有的）(结束帧和开始侦的数值可以一样，也可以不一样)*/
}
@-moz-keyframes bjcolor {
/*moz内核兼容模式下的帧集合 自定义名称*/
0%{background-color: rgba(108, 112, 255, 0.85);}/*开始帧*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整个动画运行到40%处时*/
50%{background-color: rgba(255, 193, 98, 0.85);}
75%{background-color: rgba(255, 133, 198, 0.85);}
100%{background-color: rgba(108, 112, 255, 0.85);}/*结束帧（开始和结束帧是必须有的）(结束帧和开始侦的数值可以一样，也可以不一样)*/
}
@-ms-keyframes bjcolor {
/*msIE内核兼容模式下的帧集合 自定义名称*/
0%{background-color: rgba(108, 112, 255, 0.85);}/*开始帧*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整个动画运行到25%处时*/
50%{background-color: rgba(255, 193, 98, 0.85);}
75%{background-color: rgba(255, 133, 198, 0.85);}
100%{background-color: rgba(108, 112, 255, 0.85);}/*结束帧（开始和结束帧是必须有的）(结束帧和开始侦的数值可以一样，也可以不一样)*/
}
@-o-keyframes bjcolor {
/*opera内核兼容模式下的帧集合 自定义名称*/
0%{background-color: rgba(108, 112, 255, 0.85);}/*开始帧*/
25%{background-color: rgba(161, 255, 108, 0.85);}/*在整个动画运行到40%处时*/
50%{background-color: rgba(255, 193, 98, 0.85);}/*这个花括号后面不用加分号等符号*/
75%{background-color: rgba(255, 133, 198, 0.85);}
100%{background-color: rgba(108, 112, 255, 0.85);}/*结束帧（开始和结束帧是必须有的）(结束帧和开始侦的数值可以一样，也可以不一样)*/
}
.first:hover{
-webkit-animation-name: bjcolor;
-webkit-animation-duration: 4s;
-webkit-animation-timing-function: linear;-moz-animation-name: bjcolor;
-moz-animation-duration: 4s;
-moz-animation-timing-function: linear;
-ms-animation-name: bjcolor;
-ms-animation-duration: 4s;
-ms-animation-timing-function: linear;
-o-animation-name: bjcolor;
-o-animation-duration: 4s;
-o-animation-timing-function: linear;
animation-name: bjcolor;
animation-duration: 4s;
animation-timing-function: linear;

/*animation:;看来也可以简写*/
}
/*------------------------第二个----------------------*/
@-webkit-keyframes tsform {
/*webkit内核兼容模式下的帧集合 自定义名称*/
0%{
background-color: rgba(108, 112, 255, 0.85);
-webkit-transfrom: rotate(0deg) scale(1);
color: #ffffff;
}
25%{
background-color: rgba(161, 255, 108, 0.85);
-webkit-transform: rotate(45deg) scale(1.1);
}
50%{
background-color: rgba(255, 193, 98, 0.85);
-webkit-transform: rotate(0deg) scale(1);
}
75% {
background-color: rgba(255, 81, 87, 0.85);
-webkit-transform: rotate(-45deg) scale(1.1);
color: #b7ffd4;
}
100%{
background-color: rgba(108, 112, 255, 0.85);
-webkit-transform: rotate(0deg) scale(1);
color: #faff96;
}
}
@-moz-keyframes tsform {
/*moz内核兼容模式下的帧集合 自定义名称*/
0%{
background-color: rgba(108, 112, 255, 0.85);
-moz-transfrom: rotate(0deg) scale(1);
color: #ffffff;
}
25%{
background-color: rgba(161, 255, 108, 0.85);
-moz-transform: rotate(45deg) scale(1.1);
}
50%{
background-color: rgba(255, 193, 98, 0.85);
-moz-transform: rotate(0deg) scale(1);
}
75% {
background-color: rgba(255, 81, 87, 0.85);
-moz-transform: rotate(-45deg) scale(1.1);
color: #b7ffd4;
}
100%{
background-color: rgba(108, 112, 255, 0.85);
-moz-transform: rotate(0deg) scale(1);
color: #faff96;
}
}
@-ms-keyframes tsform {
/*ms内核兼容模式下的帧集合 自定义名称*/
0%{
background-color: rgba(108, 112, 255, 0.85);
-ms-transfrom: rotate(0deg) scale(1);
color: #ffffff;
}
25%{
background-color: rgba(161, 255, 108, 0.85);
-ms-transform: rotate(45deg) scale(1.1);
}
50%{
background-color: rgba(255, 193, 98, 0.85);
-ms-transform: rotate(0deg) scale(1);
}
75% {
background-color: rgba(255, 81, 87, 0.85);
-ms-transform: rotate(-45deg) scale(1.1);
color: #b7ffd4;
}
100%{
background-color: rgba(108, 112, 255, 0.85);
-ms-transform: rotate(0deg) scale(1);
color: #faff96;
}
}
@-o-keyframes tsform {
/*opera内核兼容模式下的帧集合 自定义名称*/
0%{
background-color: rgba(108, 112, 255, 0.85);
-o-transfrom: rotate(0deg) scale(1);
color: #ffffff;
}
25%{
background-color: rgba(161, 255, 108, 0.85);
-o-transform: rotate(45deg) scale(1.1);
}
50%{
background-color: rgba(255, 193, 98, 0.85);
-o-transform: rotate(0deg) scale(1);
}
75% {
background-color: rgba(255, 81, 87, 0.85);
-o-transform: rotate(-45deg) scale(1.1);
color: #b7ffd4;
}
100%{
background-color: rgba(108, 112, 255, 0.85);
-o-transform: rotate(0deg) scale(1);
color: #faff96;
}
}
.second{
margin-left: 50px;
/*如果这里不设置：hover的话，会在一开始刷新的时候自动播放*/
-webkit-animation-name: tsform;
-webkit-animation-duration: 1s;
-webkit-animation-timing-funtion: ease-in-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: tsform;
-moz-animation-duration: 1s;
-moz-animation-timing-funtion: ease-in-out;
-moz-animation-iteration-count: infinite;
-ms-animation-name: tsform;
-ms-animation-duration: 1s;
-ms-animation-timing-funtion: ease-in-out;
-ms-animation-iteration-count: infinite;
-o-animation-name: tsform;
-o-animation-duration: 1s;
-o-animation-timing-funtion: ease-in-out;
-o-animation-iteration-count: infinite;
animation-name: tsform;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadein{
0%{
opacity: 1;
background-color: #9937ff;
}
50%{
opacity: 0.1;
background-color: #FF33FF;
}
100%{
opacity: 1;
background-color: #FF33FF;
}
}
div.third:hover{ /*简写样式
animation:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count*/
-webkit-animation:fadein 1s ease-in-out;
-o-animation:fadein 1s ease-in-out;
animation:fadein 1s ease-in-out;
}
</style>
</head>
<body>
<h1>animation案例一</h1>
<h4>animation实现一个属性值得动画——背景变换</h4>
<div class="first">鼠标经过</div>
<p>总结：而他的帧集合也需要写内核前缀，就会有四个不同的：-webkit-keyfranmes；-moz-keyfranmes；-ms-keyfranmes；-o-keyfranmes.然后，hover模式中每一个带着animation的属性前也要加内核前缀</p>
<hr/>
<h1>animation案例二</h1>
<h4>animation实现多个属性值得动画——transform变换+过渡速度变化+循环样式</h4>
<div class="second">不要鼠标，我也自动循环</div>
<p>transform在对应的内核帧集合中也需要写对应的内核前缀，
<br/>-webkit-animation-iteration-count: infinite;设定动画循环次数
<br/>infinite表示无限循环；也可以填数值来设置具体的循环次数，</p>
<hr/>
<h1>animation案例三</h1>
<h4>animation实现网页渐入效果</h4>
<div class="third">鼠标经过</div>
<p></p>
<hr/>
</body>
</html>

CSS3中的animation动画的更多相关文章

  1. 怎样使CSS3中的animation动画当每滑到一屏时每次都运行

    这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...

  2. 如何使CSS3中的animation动画当每滑到一屏时每次都运行

    这个我还没用过,但感觉以后会用到,就随手摘抄一下啦<div id="a1"></div> <div id="a2">< ...

  3. css3中变形与动画（三）

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  4. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  5. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  6. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  7. css3中变形与动画（一）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  8. css3中的animation

    不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在di ...

  9. css3中变形与动画（二）

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. 线段树（codevs1082）

    type jd=record z,y,lc,rc,sum,toadd:int64; end; var tree:..] of jd; qzh:..] of int64; x:..] of int64; ...

  2. 【转】关于Class.forName(“com.mysql.jdbc.Driver”)

    原文:http://www.cnblogs.com/gaojing/archive/2012/03/23/2413638.html 传统的使用jdbc来访问数据库的流程为: Class.forName ...

  3. SpringTest框架JUnit单元测试用例获取ApplicationContext实例的方法

    步骤 1.继承AbstractJUnit4SpringContextTests 2.引入ApplicationContext 示例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  4. nginx之location

    1locations简介 location的主要作用就是根据用户请求的uri来执行不同的应用. 2location的语法 location [=|~|~*|^~|@] uri{...........} ...

  5. java-通讯stocket插件mina实例

    mina是对nio的具体实现.是目前比较高效和流行的nio(非阻塞式I/O)框架 mina主要包括: 其中服务端为:NioSocketAcceptor 客户端为:NioSocketConnector ...

  6. 【深入Java虚拟机】之一：Java内存模型与内存溢出

    [深入Java虚拟机]之:Java内存区域与内存溢出 高速缓存模型如下: ----------------------------------------------------分割线-------- ...

  7. C#-WinForm-打开其他窗体的三种方式-Show()、设置Owner()、ShowDialog()

    打开其他窗体的三种方式 Show - 例如登入界面进入主页面,直接将主页面展示出来,两个窗体互不影响 public partial class Form1 : Form { public Form1( ...

  8. JQuery 判断浏览器及其版本

    JQuery 中用 方法 jQuery.browser 来判断浏览器,返回值可以为: safari opera msie mozilla. 当然有时候我们还需要区分版本 这就要用到 jQuery.br ...

  9. Linux基础3（用户/组管理，rpm，yum，源码安装软件）

    用户管理 与用户相关的配置文件 /etc/passwd /etc/shadow /etc/skel /etc/defalut/useradd /etc/login.defs useradd userm ...

  10. Hive 的 map join

    学习自 http://blog.csdn.net/xqy1522/article/details/6699740 1. Map Join 的使用场景: 关联操作中有一张表非常小 不等值的链接操作 2. ...