css3 动画(animation)-简单入门

css3之动画(animation)

css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做一些动画)。具体如何使用呢???

首先定义一个动画,然后引用动画。

定义一个动画要使用@keyframes,然后跟上你要定义的动画的名字。关键字"from"表示开始, "to"表示结束,等同于0% 和 100%。最好使用百分比来表示变化发生的时间,这样的话还可以定义从开始到结束中间的其它的时间状态,例如,25%,50%等等,而且使用百分比的话,浏览器的兼容性会更好。

创建过动画之后,需要绑定到选择器样式上面,这样就可以在HTML中直接引用样式,从而实现动画效果。

例如:a.定义一个从红色到黄色的动画。

@keyframes redToYelloAnimate
{
    from {background: red;}
    to {background: yellow;}
}

b.定义一个选择器div的样式,使用animation属性引用动画。动画的名字是redToYelloAnimate,用2s时间,从红色变到黄色。

div{
     animation: redToYelloAnimate 2s;
 }

animation是动画所有属性的的简写。具体包含:

animation-name: 规定@keyframes动画的名称,就是你定义动画时所起的名字。

animation-duration:完成一次完整的动画需要花费的时间,注意单位是s(秒)或者ms(毫秒),默认是0,所以这个属性必须赋值,不然没动画效果。

animation-timing-function:规定动画的速度曲线。默认是“ease”,动画是低速开始,然后加快,最后变慢直至结束。

animation-delay:动画延迟的时间,默认是0。

animation-iteration-count:动画被播放的次数,默认是1。

animation-direction:动画是否在下一个周期逆向地播放

animation-play-state:动画是否正在运行或暂停,默认是“running”

animation-fill-mode:规定对象动画时间之外的状态。

有几个属性需要说一下:

animation-timing-function规定动画的速度曲线,使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线,提供了几个值,你也可以自己定义值。linear:动画一直匀速运动。ease-in 动画低速开始。ease-out动画低速结束。ease-in-out:动画低速开始和结束。cubic-bezier(n,n,n,n):在cubic-bezier 函数中定义自己的值。

animation-iteration-count动画播放的次数,值是n次或者无限次infinite。

animation-direction:alternate是反向播放,如果动画设为只播放一次,alternate不会有效果。有时需要slidedown下拉的效果,如果可以反向播放,那么slideup收起的动作就可以使用同一个动画了?!!!一开始欣喜若狂,后来发现,只播放一次,是不会有效果的,所以slidedown和slideup使用同一个动画,不可行。。。真是个大缺憾啊。。。。。。。

animation-fill-mode:none | forwards | backwards | both

none不改变默认行为。

forwards 当动画完成之后,保持最后一个属性值。如上面的例子中,如果想让div在动画结束之后一直保持黄色的话,就需要使用这个值。

backwards  在animation-delay 所制定的一段时间内,动画开始之前,使用开始属性值。

both 向前和向后填充模式都被应用。

时间: 2024-10-25 08:41:39

css3 动画(animation)-简单入门的相关文章

使用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

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

Android动画Animation简单示例

Animation是Android给我们提供的一个可以实现动画效果的API,利用Animation我们可以实现一系列的动画效果,比如缩放动画,透明度动画,旋转动画,位移动画,布局动画,帧动画等等.Android基础动画分为四种,分别是Tween Animation,Frame Animation,Layout Animation,Property Animation.由于动画效果不好用图片进行展示,大家可以自己亲手试试看下效果.下面给出前三种简单的示例代码,帮助大家进行简单的动画入门. (1)

Qt-4.6动画Animation快速入门三字决

Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟大光荣的QLayout里,也许它们可以唱个歌,跳个舞.    所谓动画就是在一个时间段内的不同时间点有不同的状态,只要定义好这样状态,实现动画就是水到渠成的事情.当然做这件事情,最好用的就是状态机,没错Qt-4.6.0提供了QStateMachine类,不过今天我要讲的三字决要简单一些. 第一决:QPropertyAnimation QProper

记录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

@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