<!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. unittest使用过程中sys.exit(not self.result.wasSuccessful())

    起因: 在运行下面的unittest过程中出现了个Traceback: 被测试脚本: # splitter.py def split(line, types=None, delimiter=None) ...

  2. Retro 2013

    现在的team里每个迭代都会做一次retro,回顾这两周的情况,有哪些做得好的地方,有哪些做得不足的地方,并制定出一系列action,以期望在下一个迭代中解决这些问题.我觉得这种形式挺不错.因此今年的 ...

  3. Resharper快捷键

    建议你使用 Reshaper 的快捷键,不要担心 Reshaper 会把你原来的快捷键设置给覆盖了,因为如果某个快捷键和 VS 是冲突的,Reshaper会让你自己选择需要使用 VS 还是 Resha ...

  4. tttttabs

    <div id="fil-page" class="fil-page"> <div class="fil-container&quo ...

  5. Timer定时任务

    // main方法 public static void main(String[] args) { timerEnter(); } // 设定指定任务task在指定延迟delay后进行固定延迟per ...

  6. OKhttp初步

    OkHttp 使用方法:1.分为同步和异步.同步:1.getRequest request = new Request.Builder().url(utl).build();Response resp ...

  7. truncate与delete的区别

    TRUNCATE TABLE 在功能上与不带 WHERE 子句的 DELETE 语句相同:二者均删除表中的全部行.但 TRUNCATE TABLE 比 DELETE 速度快,且使用的系统和事务日志资源 ...

  8. java 上传图片 并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  9. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. zoj1492 最大团

    Maximum Clique Time Limit: 10 Seconds      Memory Limit: 32768 KB Given a graph G(V, E), a clique is ...