通过 @keyframes 规则,您能够创建动画。

创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中,您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。

0% 是动画的开始时间,100% 动画的结束时间。

为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

描述
animationname 必需。定义动画的名称。
keyframes-selector

必需。动画时长的百分比。

合法的值:

  • 0-100%
  • from(与 0% 相同)
  • to(与 100% 相同)
css-styles 必需。一个或多个合法的 CSS 样式属性。

实例一:

@keyframes mymove
{
from {top:0px;}
to {top:200px;}
} @-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
} @-webkit-keyframes mymove /* Safari 和 Chrome */
{
from {top:0px;}
to {top:200px;}
} @-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
} 实例二:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} @-moz-keyframes mymove /* Firefox */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} @-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} @-o-keyframes mymove /* Opera */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
实例三:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
} @-moz-keyframes mymove /* Firefox */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
} @-webkit-keyframes mymove /* Safari 和 Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
} @-o-keyframes mymove /* Opera */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}

animation: name duration timing-function delay iteration-count direction;

示例:-webkit-animation: start 1.5s infinite ease-in-out;

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

那么接下来,咱来个实例,

做一个H5页面底部,向上往复运动加渐隐提示用户向上滑动页面的效果:

注释:transform: translate(0,-8px) 设置x轴与y轴的偏移值,与top与left不同,是在top与left的定点的基础上再进行的坐标偏移

代码如下:

@-webkit-keyframes start {

0%,30% {opacity: 0;-webkit-transform: translate(0,10px);}
60% {opacity: 1;-webkit-transform: translate(0,0);}
100% {opacity: 0;-webkit-transform: translate(0,-8px);}
}
@-moz-keyframes start {
0%,30% {opacity: 0;-moz-transform: translate(0,10px);}
60% {opacity: 1;-moz-transform: translate(0,0);}
100% {opacity: 0;-moz-transform: translate(0,-8px);}
}
@keyframes start {
0%,30% {opacity: 0;transform: translate(0,10px);}
60% {opacity: 1;transform: translate(0,0);}
100% {opacity: 0;transform: translate(0,-8px);}
}

#array{
      position:absolute;z-index:999;-webkit-animation: start 1.5s infinite ease-in-out;
}

<img src="data:images/arrow.png" style="width:20px;height:15px; top:460px; left:150px;" id="array" class="resize">

animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画的更多相关文章

  1. Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画

    原文 Windows Phone 8初学者开发—第22部分:用演示图板创建卷盘的动画 第22部分: 用演示图板创建卷盘的动画 原文地址:http://channel9.msdn.com/Series/ ...

  2. css3中的变形(transform)、过渡(transtion)、动画(animation)

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...

  3. CSS3学习(CSS3过渡、CSS3动画)

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  4. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  5. (一)CSS3动画应用 - CSS3 实现 侧边栏展开收起

    @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不 ...

  6. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  7. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  8. js动画和css3动画的区别

    JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式.但是由于逐帧动画的帧序列内容不一样,会增加制作 ...

  9. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

随机推荐

  1. Java正則表達式入门

     众所周知,在程序开发中,难免会遇到须要匹配.查找.替换.推断字符串的情况发生,而这些情况有时又比較复杂,假设用纯编码方式解决,往往会浪费程序猿的时间及精力.因此,学习及使用正則表達式,便成了解决这一 ...

  2. 【转】通过CMD命令设置定时关机及ShutDown命令大全

    经常会遇到这种情况:现在有个事情要离开很长时间,到那还在下载一个东西仅差10分钟就完成了,或者杀毒之类,不想让电脑一直开着也不想现在就停止工作.这是就会用到定时关机. 电脑系统设置(CMD命令)智能关 ...

  3. iOS开发——OC篇&协议篇/NSCoder/NSCoding/NSCoping

    协议篇/NSCoder/NSCoding/NSCoping 协议声明类需要实现的的方法,为不同的类提供公用方法,一个类可以有多个协议,但只能有一个父类,即单继承.它类似java中的接口. 正式协议(f ...

  4. linux之Apache

    apache  在linux下命令 2. 编译Apache 在src目录下 ./configure 可用 ./configure--help|less 得到帮助, make, make install ...

  5. Pull Requests

    Contribution Guide Issue Tracker You can find outstanding issues on the GitHub Issue Tracker. Pull R ...

  6. Http抓包工具Charlse使用教程

    [原文]http://blog.csdn.net/wildfireli/article/details/19829479 Charles是目前最强大的http调试工具,在界面和功能上远强于Fiddle ...

  7. 随便写写,当作了解--Css

    Css,Cascading Style Sheets,层叠样式表.用于控制HTML页面样式.他的基本格式由两部分组成: 选择器 声明块 一.使用 css的注释用 /* 注释内容 */ 1.导入外部样式 ...

  8. 主机开启后,显示器显示NO SIGNAL,无信号

    第一个原因:有可能是主机和显示器的连线接触不良(特别是接口处没有插好或者松动),还有可能这根连接的数据线出现问题,所以才会出现没有信号输入到屏幕,无显示,黑屏,处理方法:重新拨插一下这根连接的数据线, ...

  9. CSS表格固定列宽

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

  10. ADS1.2 集成开发环境的使用

    连风大神都没用过这个ADS1.2,什么破玩意儿啊,好像板子里面的资料也没有找到有这个软件,但是网上有滴,ADS1.2 集成开发环境的使用还是要会的,,, ARM ADS 全称为ARM Develope ...