<!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. MinHash算法

    MinHash是用于快速检测两个集合的相似性的方法.改方法由Andrei Broder(1997)发明,并最初用于搜索引擎AltaVista中来检测重复的网页的算法.它同样可以用于推荐系统和大规模文档 ...

  2. 数据源DBCP一二

    其实DBCP这个数据源实际上和com.alibaba.druid.pool.DruidDataSource 是差不多的

  3. 4-pwd 打印当前工作目录

    pwd print name of current/working directory 打印当前工作目录 [语法]: pwd [选项] [参数] [功能介绍] pwd命令以绝对路径的方式显示用户当前工 ...

  4. navicat cannot create file 文件名、目录名或卷标语法不正确 解决方法

    配置了mycat,用navicat连接8066端口,点击“查询”的时候发现出现报错: 开始以为是mycat的配置有问题,找了好久都没发现错误.根据提示信息进入到相应的目录发现每个连接其实就是一个win ...

  5. [转]oracle数据类型和对应的java类型

    地址: http://otndnld.oracle.co.jp/document/products/oracle10g/102/doc_cd/java.102/B19275-03/datacc.htm ...

  6. Kernel Methods (3) Kernel Linear Regression

    Linear Regression 线性回归应该算得上是最简单的一种机器学习算法了吧. 它的问题定义为: 给定训练数据集\(D\), 由\(m\)个二元组\(x_i, y_i\)组成, 其中: \(x ...

  7. win7如何让局域网其他电脑通过IP直接访问自己电脑的网站

    一.打开控制面板 二.打开防火墙 三.点击右侧高级设置 四.点击防火墙属性 五.点击防火墙状态选择为关闭,确定 六.点击右侧允许或功能通过windows防火墙 七.执行第六部会打开防火墙通信例外窗口, ...

  8. hdu2665 && poj2104划分树

    K-th Number Time Limit: 20000MS   Memory Limit: 65536K Total Submissions: 47066   Accepted: 15743 Ca ...

  9. eclipse安装ADT

    ADT安卓开发工具安装 ADT(Android Development Tools)安卓开发工具,是安卓在Eclipse IDE环境中的开发工具,为Android开发提供开发工具的升级或者变更,简单理 ...

  10. C#-WinForm-Timer控件

    比如在窗体中显示时间: 错误思路一:我在窗体结构函数中写入一个死循环,每隔一秒显示一次当前时间 public Form6() { InitializeComponent(); while (true) ...