玩转有趣的 CSS3 Animation 动画

此篇想法总访问 49 次,今日访问 2 次。

CSS3 Animation动画浏览器支持情况:

各浏览器对css Animation技术的支持还是很不错的。

下面就来看一下如何玩转 CSS3 Animation 技术。


@keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

先来举一个栗子:

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

上方的CSS语句代表什么含义呢,听我慢慢道来:

  • 首先添加声明 @keyframes 规则,就像我们在JavaScript中的 var 或者 function 关键字一样,告诉JavaScript我要声明一个变量或者声明一个函数语句。只不过 @keyframes 是告诉CSS我需要声明一组Animation。

  • 紧接着一个空格再给你声明的这组Animation一个名字,不然当你需要在CSS的其他地方添加Animation的时候怎么知道是要用那一组呢,这里给他命名为 myfirst。(和js的变量命名规则几乎一样,不要使用CSS中的关键词或者保留关键词,不可以以数字开头等等,可以包含数字字母和下划线)。

  • 好的,进入css块内,from关键词表示应用改动画的元素初始状态的属性是怎么样的,to关键词表示应用该动画的元素最终状态的CSS属性是怎么样的,你还可以省略 from 的初始状态:

@keyframes myfirst
{
	to {background: yellow;}
}

表示当前元素从当前属性状态过渡到to关键词制定的状态。
当然除了使用 fromto 关键词,你还可以使用百分比表示动画进行的某个阶段:

@keyframes myfirst
{
	0% {background: red;}
	100% {background: yellow;}
}

当然0-100中间的值也是可以设置的:

@keyframes myfirst
{
	0% {background: red;}
	25% {background: green;}
	50% {background: blue;}
	100% {background: yellow;}
}

CSS3 Animation动画初体验

好的,以最后一组代码为例,看一下他的应用效果:

如下是源码:

<style>
@keyframes myfirst
{
	0% {background: red;}
	25% {background: green;}
	50% {background: blue;}
	100% {background: yellow;}
}
.myfirst-div{
	width: 100px;
	height: 100px;
	animation: myfirst 1s ease infinite;
}
</style>
<div class="myfirst-div"></div>

关注点请放到这句上:

animation: myfirst 1s ease infinite;

类似于JavaScript中调用函数那样,这就相当于在CSS中调用动画,而animation的属性值就是我们给这个函数传入的参数们,当然,JavaScript中支持一种叫座函数重载的特性,CSS中也不例外,其实css中与animation技术有关的属性值一共有8个:

  • animation-name : 规定 @keyframes 动画的名称。
  • animation-duration : 规定 @keyframes 动画的名称。
  • animation-timing-function : 规定 @keyframes 动画的名称。
  • animation-delay : 规定 @keyframes 动画的名称。
  • animation-iteration-count : 规定动画被播放(迭代)的次数。默认是 1。
  • animation-direction : 规定动画是否在下一周期逆向地播放。默认是 “normal”。
  • animation-play-state : 规定动画是否正在运行或暂停。默认是 “running”。
  • animation-fill-mode : 规定对象动画时间之外的状态。

他们还有一种简写的形式,就像上方例子中那样全部跟在 animation 后即可:

animation: name duration timing-function delay iteration-count derection fill-mode;

注意:简写形式的最简化情况是只包含 animation-name 和 animation-duration,并且至少包含这两个属性值。

你可能发现了,为什么简写的形式只有7个参数呢,因为animation-play-state参数只能单独作为属性存在而非animation简写形式的一枚参数!

请看下方示例:

源码:

@keyframes mysecond{
	0% {
		background: red;
	}
	100% {
		background: yellow;
	}
}
.mysecond-div{
	width: 100px;
	height: 100px;
	animation-name: mysecond;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-delay: .2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
}
</style>
<div class="mysecond-div"></div>

同样他的简写形式:

.mysecond-div{
	width: 100px;
	height: 100px;
	animation: mysecond 1s linear .2s infinite alternate;
	animation-play-state: running;
}

逐一介绍animation的8个属性值

(1) animation-name

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationName="mymove"

为 @keyframes 动画规定一个名称

animation-name: keyframename|none;
描述
keyframename 规定需要绑定到选择器的 keyframe 的名称。
none 规定无动画效果(可用于覆盖来自级联的动画)。

(2) animation-duration

animation-duration 属性定义动画完成一个周期所需要的时间,以秒或毫秒计。

默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationDuration="3s"
animation-duration: time;
描述
time 规定完成动画所花费的时间。默认值是 0,意味着没有动画效果。

(3) animation-timing-function

animation-timing-function 规定动画的速度曲线。速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。速度曲线用于使变化更为平滑。

默认值: ease
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationTimingFunction="linear"
animation-timing-function: value;

animation-timing-function 使用名为三次贝塞尔(Cubic Bezier)函数的数学函数,来生成速度曲线。您能够在该函数中使用自己的值,也可以预定义的值:

描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
Steps(<number_of_steps>,<direction>) 创建逐帧动画

(4) animation-delay

animation-delay 属性定义动画何时开始。允许负值,-2s 使动画马上开始,但跳过 2 秒进入动画。

默认值: 0
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationDelay="2s"

(5) animation-iteration-count

animation-iteration-count 属性定义动画的播放次数。

默认值: 1
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationIterationCount=3
animation-iteration-count: n|infinite;
描述
n 定义动画播放次数的数值。
infinite 规定动画应该无限次播放。

(6) animation-direction

animation-direction 属性定义是否应该轮流反向播放动画。如果 animation-direction 值是 “alternate”,则动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

默认值: normal
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationDirection="alternate"
animation-direction: normal|alternate;
描述
normal 默认值。动画应该正常播放。
alternate 动画应该轮流反向播放。

(7) animation-play-state

animation-play-state 属性规定动画正在运行还是暂停。可以在 JavaScript 中使用该属性,这样就能在播放过程中暂停动画。

默认值: running
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationPlayState="paused"
animation-play-state: paused|running;
描述
paused 规定动画已暂停。
running 规定动画正在播放。

(8) animation-fill-mode

animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。其属性值是由逗号分隔的一个或多个填充模式关键词。

默认值: none
继承性: no
版本: CSS3
JavaScript 语法: object.style.animationFillMode=none
animation-fill-mode : none | forwards | backwards | both;
描述
none 不改变默认行为。
forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。
backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both 向前和向后填充模式都被应用。
发布日期 » 2017年11月5日 周日
原创声明 » 请勿复制转载,谢谢配合。
Airglass.js核心库
JavaScript核心概念
硬件编程、Arduino
文档翻译计划
微信开发
前端脚手架
运维
可视化
生活自有“道”理
视觉设计、用户体验
陈帅华的微信二维码