用CSS3写动画的两种方法。

Posted by luoway on October 24, 2015

CSS3动画 - animation

w3school: 使用animation创建动画步骤:

  1. 创建动画@keyframes
  2. 把它捆绑到某个选择器

1.@keyframes 规则

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

//使用百分数
@keyframes myfirst
{
	0%   {background: red;}
	25%  {background: yellow;}
	50%  {background: blue;}
	100% {background: green;}
}

2.指定某个选择器运行名为 myfirst 的动画

div{
	animation-name: myfirst;	//动画名称
	animation-duration: 5s;		//动画时长
	animation-timing-function: linear;	//动画的速度曲线
	animation-delay: 2s;	//延迟播放动画
	animation-iteration-count: infinite;	//动画循环播放次数
	animation-direction: alternate;		//下一周期逆向播放动画,默认是normal
	animation-play-state: running;		//控制动画暂停、运行

	//animation-fill-mode 属性规定动画在播放之前或之后,其动画效果是否可见。
	animation-fill-mode : none | forwards | backwards | both;
}

//简写
div{
	animation: myfirst 5s linear 2s infinite alternate;
}

CSS3过渡 - transition

w3school: CSS3 过渡

通过 CSS3 transition ,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 规定您希望把效果添加到哪个 CSS 属性上
  • 规定效果的时长

实例:

div{
	transition-property: width;
	transition-duration: 1s;
	transition-timing-function: linear;
	transition-delay: 2s;
}

div{
	transition: width 1s linear 2s;
}

效果开始于指定的 CSS 属性改变值时。

结合js,我们可以控制动画运行的过程,即添加、修改、移除样式时发生动画,并通过改变transition属性的值以调整动画播放。

区别

下面通过实例展示区别:

animation:
通过设置动画帧播放动画,动画结束状态重置。

transition:
通过设置元素样式的改变而播放动画效果,动画结束则样式完成改变。

获取元素CSS值之getComputedStyle方法熟悉:
在动画执行过程中,对style对象的属性获取属性值,只能获得设置的初始值、末值。
此时,getComputedStyle()用于获取元素CSS的即时值。

需要注意的是,animation动画有暂停属性,transition过渡没有暂停属性。
而实现transition的暂停,其困难在于确定过渡动画距离结束的剩余时长。

Flappy Bird

使用transition完成的 Flappy Bird 小游戏:luoway.space/Flappy-Bird/