CSS3 动画Animation的8大属性

animation复合属性。检索或设置对象所应用的动画特效。

如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before

1.animation-name  检索或设置对象所应用的动画名称

必须与规则@keyframes配合使用,eg:@keyframes animations  animation-name:animations;

2.animation-duration  检索或设置对象动画的持续时间

animation-duration:3s;    动画完成使用的时间为3s

3.animation-timing-function  检索或设置对象动画的过渡类型

linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)

ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)

ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

step-start:等同于 steps(1, start)

step-end:等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?):接受两个参数的步进函数。第一个参数必须为正整数,指定函数的步数。第二个参数取值可以是start或end,指定每一步的值发生变化的时间点。第二个参数是可选的,默认值为end。

cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需在[0, 1]区间内

4.animation-delay  检索或设置对象动画延迟的时间

animation-delay:0.5s;     动画开始前延迟的时间为0.5s

5.animation-iteration-count  检索或设置对象动画的循环次数

animation-iteration-count: infinite | number;

infinite:无限循环

number: 循环的次数

6.animation-direction  检索或设置对象动画在循环中是否反向运动

normal:正常方向

reverse:反方向运行

alternate:动画先正常运行再反方向运行,并持续交替运行

alternate-reverse:动画先反运行再正方向运行,并持续交替运行

7.animation-play-state  检索或设置对象动画的状态

animation-play-state:running | paused;

running:运动

paused: 暂停

animation-play-state:paused;       当鼠标经过时动画停止,鼠标移开动画继续执行

8.animation-fill-mode  检索或设置对象动画时间之外的状态

none:默认值,不设置对象动画之外的状态

forwards:设置对象状态为动画结束时的状态

backwards:设置对象状态为动画开始时的状态

both:设置对象状态为动画开始或结束时的状态

结束语:本文来源于http://www.css88.com/book/css/properties/animation/animation.htm,目前只是归纳了关于animation属性的属性值及其含义,

如果想更深的了解,可以进入原网页进行更深入的学习,以上希望对各位读者有所帮助!

时间: 2024-10-10 20:17:10

CSS3 动画Animation的8大属性的相关文章

使用CSS3动画 animation 来控制元素的显示和隐藏

CSS3中 animation 和 transition 俩样式都能创建动画效果,而且是后台C++执行的,所以效率比普通jQuery的js模拟动画的效率高很多,所以建议大家能用css实现的效果都用css. transition的使用比较简单,这里就不介绍了,着重为大家介绍下 animation . animation 的css属性有很多,本文通过 animation-name 来控制启动动画和转换动画,以下是一个通过 animation 来控制元素的显示和隐藏的例子(仅支持webkit): <!

css3动画-animation

animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animation animation-delay:从加载到开始执行的延迟 animation-direction:normal|reverse|alternate|alternate-reverse   参考 normal:往前执行,完成后又回到原点 reverse:和定义的方向相反,完成后回到原点开始执行 al

css3 动画 animation transform

<!DOCTYPE html><!-- saved from url=(0073)http://www.w2bc.com/demo/201504/2015-04-27-jquery-tecent-focus/index.html --><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <m

css3动画-animation属性

在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做"关键帧",玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个"Keyframes"是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要

css3 动画(animation)-简单入门

css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画).具体如何使用呢??? 首先定义一个动画,然后引用动画. 定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字.关键字"from"表示开始, "to"表示结束,等同于0% 和 100%.最好使用百分比来表示变化发生的时间,这样的话还可以定义从开

CSS3 动画animation

关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中,元素div由50X50红色的大小变化到状态100X100 黄色的过程中,这一头一尾的两个状态起到了对动画定义的关键作用.所以这两个状态就是整个动画的关键帧. @keyframes 定义动画关键帧 通过之前的胡说现在我们看到@keyframes就不会觉得这个@符号有多别扭了.我们使用它来定义动画的关

记录CSS3动画animation学习小心得

上个星期在学习JS之余,温习CSS3,在网上看到一个3D立体球的效果,于是自己也按照上面的方法写了一个: 效果(请用chrome浏览): http://htmlpreview.github.io/?https://github.com/yuhaod1/Blog/blob/master/Blog/css3%E7%AB%8B%E4%BD%93%E7%90%83/css3%E7%AB%8B%E4%BD%93%E7%90%83.html 只做了chrome下的效果,不做其它浏览器的兼容: 当时写完代码测

css3动画 --- Animation和Transition

Animation animation属性是以下属性的一个简写属性形式. animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state 初始值 animation-name: none animation-duration: 0s an

css3动画animation

@keyframes film_out{ from{ transform: scale3d(1,1,1) rotate(0); opacity: 1; } to{ transform: scale3d(0.7,0.7,0.7) rotate(90deg); opacity: 0; } } div { animation: film_out 5s linear 2s infinite alternate forwards; -webkit-animation: film_out 5s linear