css3动画实现原则？

html-css08

css3动画实现原则？,第1张

要创建CSS3动画，你将不得不了解@keyframes规则。

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

实例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>css3动画实例</title>

<style>

div

{

width:100px

height:100px

background:red

position:relative

animation:myfirst 5s

-webkit-animation:myfirst 5s/* Safari and Chrome */

}

@keyframes myfirst

{

0% {background:redleft:0pxtop:0px}

25% {background:yellowleft:200pxtop:0px}

50% {background:blueleft:200pxtop:200px}

75% {background:greenleft:0pxtop:200px}

100% {background:redleft:0pxtop:0px}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:redleft:0pxtop:0px}

25% {background:yellowleft:200pxtop:0px}

50% {background:blueleft:200pxtop:200px}

75% {background:greenleft:0pxtop:200px}

100% {background:redleft:0pxtop:0px}

}

</style>

</head>

<body>

<p><b>注意:</b>该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>

<div></div>

</body>

</html>

CSS3中新增了动画相关的属性，其中@keyframes规则用于设置创建动画，其原理其实就是将一套css样式逐渐变成另外一套css样式，在@keyframes中可以使用百分比表示动画进度对应的样式，0% 是动画的开始样式，100% 动画的结束样式，每个样式可以称为"关键帧样式"，每个动画可以包含很多帧，每一帧可以设置一个或多个样式。语法格式: @keyframes 动画名:{0%:{css样式} ... 100%:{css样式}} ，其中关键帧合法值是0-100%，from与 0% 相同，to与 100% 相同

使用@keyframes定义了动画，那如何使用呢？

那就得在对应要使用该动画的元素上添加animation属性

animation是一个复合属性，是所有动画属性的缩写，除animation-play-state

1. animation-name 动画名，表示要应用哪个动画

2. animation-duration 动画完成一个周期所花费的时间（秒或毫秒数），默认0

3. animation-timing-function 表示动画速度曲线，常用关键字linear、ease、ease-in、ease-out、ease-in-out，默认是ease。还可以使用cubic-bezier(n,n,n,n)设置

4. animation-delay 动画延迟时间，默认0

5. animation-iteration-count 动画播放次数，默认1 只播一次

6. animation-direction 设置动画在下个播放周期是否逆转方向，默认是 "normal"正常播放，alternate轮流反向播放

7. animation-fill-mode 用于设置动画填充模式，none 不改变默认行为；forwards当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）；backwards在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）；both向前和向后填充模式都被应用

8. animation-play-state 设置动画播放状态，paused动画已暂停，running是默认值，表示动画正在运行播放

实现一个奔跑效果，你需要以下几个资源

最终效果：

http://codepen.io/idiotWu/pen/IDqlw

实现原理：

一、拿到雪碧图，一定要告诉设计小伙伴，这个雪碧图是自循环的。

二、用 keyframes 定义动画的规则

三、里面有个新东西需要解释 step()

首先参考 CSS3 timing-function: steps() 详解