CSS :keyframes 和 animation

位置: 首页 > 马黑教程
[发布: 2023.3.2  作者: 水手  阅读: 204]
animation 将CSS关键帧动画即 keyframes 动画绑定到所需元素,令该元素再web页中运行动画。


那么,我们得先设计一个CSS关键帧动画。CSS关键帧动画的语法为:


        @keyframes 动画名称 { 动画内容 }


@keyframes 是CSS编写动画的关键字;动画名称自己命名,然后是一对花括号 {},花括号里面是描述动画内容的代码。


动画内容基于CSS各类属性,可以是元素的尺寸与位置、文本大小和颜色、transform转换(如:旋转 rotate)等等。试着参考如下示例:


@keyframes move {
        0% { left: 20px; }
        100% { left: 600px; }
}


上面名称为 move 的关键帧动画,开始时(0%)运动对象(调用move的元素)的位置在 20px 处,结束时的位置在 600px 处。其中,left 属性用于规定元素的位置,而 0% 和 100% 用于描述动画在一个运行周期里的时间节点,如果时间节点只有头尾两个,上述代码可以用另一种方式表示:


@keyframes move {
        from { left: 20px; }
        to { left: 600px; }
}


from 是 从…… 的意思,to 是 到…… 的意思。假设运动对象事先定义了 left (初始)值,from 句还可以省略:


@keyframes move {
        to { left: 200px; }
}


强调一下:用 from ... to ... 来描述关键帧动画需要一个前提,即动画只有开始和结束两个时间节点。


用百分比描述动画,可以更加细化不同时段的动画状态,试参考如下示例:


@keyframes move {
        0% { left: 20px; background: olive; }
        20% { left: 300px; background: red; }
        40% { left: 0px; background: green; }
        80% { left: 600px; background: purple; }
        100% { left: 450px; background: darkred; }
}


这里,时间节点分为5个,每一个时间节点运动对象的位置都不同,背景颜色也在不断改变。这些变化说过渡性质的,位置和背景色的变化在 animation 指定的时间内逐渐完成,不是瞬间变化。


以上是关键帧动画的介绍,现在怎么调用我们编写好的 move 动画。这需要用到 animation 属性,它因为参数多会很复杂,不过我们先来容易的:在CSS选择器里使用 animation 属性给元素绑定关键帧动画并以最简单的方式令动画得到执行。假设我们有一个 id="mybox" 的 HTML 元素,请看 #mybox 选择器的代码示例:


#mybox {
        position: relative;
        left: 20px;
        width: 60px;
        height: 40px;
        background: pink;
        animation: move 4s forwards;
}


#mybox选择器的解释:


position: relative; 规定了元素的相对定位。元素只有定位后,left 属性才有效。除了relative,还可以是 absolute(就对定位)等。


left: 20px; 设定左边初始值。


width: 60px; 和 height: 40px; 设置了元素的宽高尺寸。


background: pink; 设定了元素的背景色。


animation: move 4s forwards; 是动画执行的关键所在,move 是前面在 keyframes 里编写的关键帧动画的名称;4s 是动画运行的一个周期的用时即周期时长,换句话说,就是运行一个完整的动作所需的时间;forwards 参数表示动画结束时的状态:停在最终状态。


animation 其实有很多参数,共 8 个,在简写语句中,他们一般按如下顺序排列:


        语句:animation: ①动画名称 ②周期时长 ③过渡类型 ④延时时间 ⑤重复次数 ⑥是否反向 ⑦最终状态 ⑧是否运行动画
        示例:animation: move 4s linear 0s 100 none forwards running;


上面的示例,对应着其上的语句,但其实我们不必每一个参数都写出来,可根据需要省略不必要的参数。比方说,我们只需要运行动画 move 一次,它可以简单到如下语句:


        animation: move 4s;


动画名称和动画运行的周期时长不能省略,这两个是必须参数,其他的参数可根据需要设置。请再参考如下语句:


        animation: move 4s linear 10s infinite alternate;


它表示,动画 move 按这样的方式运行:4秒一个周期,线性匀速运动,延时10秒(下达指令后过10秒才运行动画),循环不止,反向运动(就是执行完 @keyframes 描述的变化后再反向变化一次,这个动作也占用4秒,正向和反向共用8秒)。


另外,animation参数的顺序不是很严格,但名称必须在前面,周期时长必须在延时时间之前。


最后给出这 8 个参数的含义、取值等相关说明供实际使用时参考——


① animation-name :动画名称


② animation-duration :动画持续时间,必须带上时间单位,s或者ms均可


③ animation-timing-function :动画过渡类型,linear(线性过渡),ease(平滑过渡),ease-in(由慢到快),ase-out(由快到慢),ease-in-out(由慢到快再到慢)


④ animation-delay :动画延迟时间,必须带上时间单位,s或者ms均可


⑤ animation-iteration-count :动画循环次数,缺省时运行1次,可用数字表示(无单位),infinite 为循环不止


⑥ animation-direction :动画是否反向运动,normal(正常方向),reverse(反方向运行),alternate(动画先正常运行再反方向运行并持续交替运行,alternate-reverse(动画先反运行再正方向运行,并持续交替运行),


⑦ animation-fill-mode :动画结束是的状态,backward(回到初始状态),forwards(停在最终状态),none,both


⑧ animation-play-state :动画运行状态,即是否要运行,running(运行)、paused(暂停)


如果觉得简写语句不好掌握,可以分开来写,若此,#mybox 选择器的代码则可以像如下这么写:


#mybox {
        position: relative;
        left: 20px;
        width: 100px;
        height: 100px;
        background: pink;
        animation-name: move; /* 动画名称 move */
        animation-duration: 4s; /* 周期时长 4秒 */
        animation-timing-function: linear; /* 过渡类型 线性变化 */
        animation-delay: 0s; /* 延时时间 0秒(缺省值) */
        animation-iteration-count: 5; /* 运行次数 5次 */
        animation-direction: normal; /* 运行反向 正常(默认值) */
        animation-fill-mode: none; /* 结束状态 不设置() */
        animation-play-state: running; /* 是否运行 运行 */
}


8 个参数我们都一一给出了,这是好习惯但不是必须的:除了名称和周期时长,其他的参数如果不需要,都可以删掉,一切根据需要来设定。


下楼给出一个例子,大家可以单击小矩形让动画运行起来,以观察关键帧动画的运行。提示一下:@keyframes 所定义的动画是在 left: 450px; 处停止,但 3 秒后定时器会将它复原,以便可以再次单击矩形运行动画。

前一篇: 小白也做音频播放控制器
下一篇: 中英文颜色对照表

发表评论:

  
 

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com