css3 动画效果 定义和绑定执行

首先要定义一个动画效果  keyframes 关键字

这里动画效果执行完毕后 恢复本身的css样式  有的动画效果 移动到位置 要保持 就需要写好css 元素的位置

css里直接写  (这里是一般的 也就是ie10 ie11)

@keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

谷歌等webkit

@-webkit-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

opera浏览器

@-o-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

火狐浏览器

@-moz-keyframes 动画名称{

from{ color:#000;}

to{ color:red;}

}

实例

  /*定义动画*/
@keyframes piaoru{/*ie10 ie11*/
from{color: #000;}
to{color: red;}
}
@-webkit-keyframes piaoru{/*chrome safari*/
from{color:#000;}
to{color:red;}
}
@-o-keyframes piaoru{/*opare*/
from{color:#000000;}
to{color:red;}
}
@-moz-keyframes piaoru{
from{color:#000;}
to{color:red;}
}

  

下面是执行动画

直接在元素上绑定animation

 /*绑定动画*/
.abstract{
/*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/
animation: piaoru 15s;/*ie10 ie11*/
-webkit-animation:piaoru 15s;/*webkit*/
-moz-animation:piaoru 15s;
-o-animation: piaoru 15s; }

 完整实例 字体颜色变化动画效果

<style type="text/css">
/*定义动画*/
@keyframes piaoru{/*ie10 ie11*/
from{color: #000;}
to{color: red;}
}
@-webkit-keyframes piaoru{/*chrome safari*/
from{color:#000;}
to{color:red;}
}
@-o-keyframes piaoru{/*opare*/
from{color:#000000;}
to{color:red;}
}
@-moz-keyframes piaoru{
from{color:#000;}
to{color:red;}
}
/*绑定动画*/
.abstract{
/*动画执行结束后 恢复现有的样式 页面只执行一次动画效果 刷新后在执行*/
animation: piaoru 15s;/*ie10 ie11*/
-webkit-animation:piaoru 15s;/*webkit*/
-moz-animation:piaoru 15s;
-o-animation: piaoru 15s; }
</style>
<h3 class="abstract">摘要</h3>

  

 

上一篇:本机向windows服务器传输文件的三种方法


下一篇:C语言实现二叉树-利用二叉树统计单词数目