动画(Animation),是CSS3的亮点.//之一

通过animation属性指定@keyframe来完成关键帧动画;

@keyframe用法:  

@keyframes name {
0% { top:; }/*0%可用from关键字替代*/
50% { top: 10px; }
100% { top:; }/*100%可用to关键字替代*/
}

由于是CSS3,所以不出意外的各种前缀:

--图片来自MDN,CSS中的关键帧

单个帧中可填写多个属性,而且不需要保证一致,如:

@-webkit-keyframes identifier {
from { top:; }
50% { top: 10px;background-color:red; }
to { top: 20px;color:red; }
}/*这是一个完全有效的关键帧定义*/

需要注意的有几点:

  关键帧中有效的属性为可动画属性;如出现不可动画属性,会忽略该属性,不影响其余属性的动画,

  如属性后跟有 !important,则会忽略该属性,

  某个关键帧如果重复定义,则取后定义的帧,  

@-webkit-keyframes identifier {
from { top:; }
50% {
top: 10px; /*该属性会动画*/
background-color:red !important; /*因为有!important字样,所以该条将被忽略*/
text-align:center; /*由于该属性不为可动画属性,因此也被忽略*/
}
to { top: 20px;color:red; }
100% {color:green; } /*由于to关键字表示100%,所以该动画只会执行改变颜色为green,而to所对应的属性全部被忽略*/
}

帧数范围为0%-100%,不属于这个范围的则被忽略(经实验,关键帧定义可以不按顺序来,可以正确执行,但是可读性不太好);

Animation用法:

animation-name:设置动画的名称,就是@keyframe后跟的标识;

animation-duration:设置动画花费的时间,//这两个为必填属性,第一个不解释了,第二个必填的原因为默认值是0s,0s是不会产生动画效果的,所以为必填;

#demo {
animation-name:demo;
animation-duration:2s;
}
@keyframe demo {
from {top:;}
to {top:20px;}
}

animation-timing-function:设置动画的速度曲线,默认值为 ease,可选值有数个,可通过cubic-bezier函数来自定义,这里有一些定义好的,可以直接拿来用的函数,传送阵;

#demo {
animation-function: cubic-bezier(0.25,0.1,0.25,1);/*自定义的贝塞尔曲线*/
}

animation-delay:设置动画开始前的等待时间,默认为0s;

#demo {
animation-delay:2s;/*动画将于2s后执行*/
}

animation-iteration-count:设置动画执行次数,默认为1,使用 infinite 关键字可以使动画无限循环;

#demo {
animation-iteration-count:infinite;/*动画将无限循环,此时animation-fill-mode将无效*/
}

animation-direction:设置动画执行完后时候倒序执行,默认为normal,使用 alternate 关键字开启倒序执行

  //仅有animation-iteration-count值为大于1次时才会激活,倒序执行消耗时间为animation-duration设置的时间,奇数次数为正序,偶数次数为倒序;

#demo {
animation-direction:alternate;/*激活倒序播放*/
animation-iteration-count:;/*此时该属性须大于1,direction才会有效*/
}

animation-play-state:设置动画当前状态,默认是 running ,为执行状态,可以设置为 paused 为暂停,

#demo {
animation-play-state:paused;/*默认不触发动画*/
}
#demo:hover {
animation-play-state:running;/*悬浮至该元素才执行动画*/
}

animation-fill-mode:设置动画执行完后的状态(复原(none),保持第一帧(backwards)以及保持最后一帧(forwards),还有一个both值 MDN说是同时backwards和forwards,原谅我没有试出它与forwards的区别...,)

  //设置animation-iteration-count值为infinite时将导致该属性失效;

animation的简写方式对顺序要求特别严格,规格如下:

animation:name duration timing-function delay iteration-count direction play-state fill-mode;

使用时需注意:

各种前缀...@keyframe里边如果用到了transform,也是需要加前缀的,如:

@-webkit-keyframe demo {
from {-webkit-transform:rotate(7deg);}
to {-webkit-transform:rotate(14deg);}
}

部分参考文档:

MDN的动画

CSS3中的关键帧

W3School的Animation属性

W3School的@Keyframe规则

总结CSS3新特性(Animation篇)的更多相关文章

  1. 总结CSS3新特性(Transform篇)

    概述: CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫 ...

  2. 总结CSS3新特性(颜色篇)

    颜色: CSS3新增加了hsl(), hsla(), rgb(),rgba()四个函数来创建color值; hsl(): hsl函数:h(色调),s(饱和度),l(亮度); 色调:为0-360之间的数 ...

  3. 总结CSS3新特性(Transition篇)

    CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率. 可以让属性的变化过程持续一段时间,而不是立即生效.比如,将元素的颜色从白色改为黑色,通常这个改 ...

  4. 总结CSS3新特性(选择器篇)

    CSS3新增了嗯- -21个选择器,脚本通过控制台在这里运行; ~: p ~ p { color : red;/*此条规则将用于p后边所有的p...就是除了第一个p的所有p,规则同p:not(:nth ...

  5. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  6. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  7. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  8. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  9. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

随机推荐

  1. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  2. Spark入门实战系列--8.Spark MLlib(上)--机器学习及SparkMLlib简介

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .机器学习概念 1.1 机器学习的定义 在维基百科上对机器学习提出以下几种定义: l“机器学 ...

  3. 机器学习&数据挖掘笔记_19(PGM练习三:马尔科夫网络在OCR上的简单应用)

    前言: 接着coursera课程:Probabilistic Graphical Models上的实验3,本次实验是利用马尔科夫网络(CRF模型)来完成单词的OCR识别,每个单词由多个字母组合,每个字 ...

  4. 解决Myeclipse下Debug出现Source not found以及sql server中导入数据报错

    前言:在空间里回顾了我的2014,从生活.技术.家庭等各方面对自己进行总结剖析,也是给自己一个交代.也想在博客上专门写一篇2014年度菜鸟的技术路回忆录,但是因为各种事一再耽搁了,现在来写也就更显得不 ...

  5. Eclipse快捷键大全(转载)

    一.实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制).CTRL+X(剪切).CTRL+Z(撤销).CTRL+F(查找).CTRL+H(搜索文件或字符串).CTRL+Y(重做).CTRL+/(双 ...

  6. Microsoft Azure News(1) 新的数据中心Japan East, Japan West and Brazil South

    <Windows Azure Platform 系列文章目录> 微软官方博客今天表示,微软宣布将在日本东部(埼玉县)和日本西部(大阪)提供Windows Azure服务.就在最近,微软为W ...

  7. web框架--flask

    flask介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求 ...

  8. ASP.NET Core开发-MVC 使用dotnet 命令创建Controller和View

    使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使用yo 来创建Controller和View. 下面来了解dotnet 命令来创建Contr ...

  9. ASP.NET MVC Model绑定小结

    Model绑定是指从URL提取数据,生成对应Action方法的参数这个过程.前面介绍的一系列Descriptor负责提供了控制器,行为方法和参数的元数据,ValueProvieder负责获取数据,剩下 ...

  10. 阿里前端框架Alice是个不错的选择

    BootStrap虽然用户群体广大,其整体风格尽管有不少skin可选,但以国情来看还是不好看. 阿里开源的前端框架,个人觉得还是很不错,Alice处处透着支付宝中界面风格的气息,电商感挺强. 以下内容 ...