<!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. Mecanim动画系统 制作流程

  2. Spring学习进阶 （三） Spring AOP

    一.是什么AOP是Aspect Oriented Programing的简称,最初被译为“面向方面编程”:AOP通过横向抽取机制为无法通过纵向继承体系进行抽象的重复性代码提供了解决方案.比如事务的控制 ...

  3. 在chrome下-webkit-box布局的一个bug

    chrome,也就是webkit内核下作的检测, chrome版本是40, -webkit-box这种布局在移动端用的比较多,主要是因为pc端的浏览器内核参差不齐. 因为在写HTML的时候看上了-we ...

  4. poj2955括号匹配 区间DP

    Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5424   Accepted: 2909 Descript ...

  5. lucene-查询query->RangeQuery在某一范围内搜索

    有时用户会需要一种在一个范围内查找某个文档,比如查找某一时间段内的所有文档,此时,Lucene提供了一种名为RangeQuery的类来满足这种需求. RangeQuery表示在某范围内的搜索条件,实现 ...

  6. JAVA实现打印机

    我这里有以前收藏的代码,两个类实现了简易的文本打印机的功能,包括预览.简单跟你说一下. 1.PrinterDemo.java主体类,也是入口类,里面有main方法可以直接在Eclipse中调试运行,他 ...

  7. Hadoop 权威指南学习1 (主要框架）

    1. Hadoop 最出名的是 MapReduce和 HDFS,不过也有很多其他有用的子项目. 技术栈如下: Core 一系列分布式文件系统和通用I/O的组件和接口(序列化.Java RPC和持久化数 ...

  8. 配置jdk相关的记录

    1.8.0_60JAVA_HOME=/usr/local/java/jdk1.8.0_60JRE_HOME=${JAVA_HOME}/jreCLASSPATH=.:${JAVA_HOME}/lib:$ ...

  9. 【poj3237】 Tree

    http://poj.org/problem?id=3237 (题目链接) 树链剖分模板题,然而这150+行的程序我调了一天,历经艰辛,终于ac.. 题意 给出一个n个节点的带权树,要求维护操作:1. ...

  10. debian 中新建或调整 swap 空间

    调整 swap 空间之前,需要了解下面几个基本操作: 1. swap 空间是根据 /etc/fstab 中的记录挂载的 2. 可以使用 swapoff 临时关闭 swap 空间,同时可以使用 swap ...