CSS3 动画及两个简单例子

最近公司前端部分没有那么急，下一步重点在微信端，所以我粗略看了下后面的业务需求，就打算研究一下移动端的 HTML5 页面的优雅展现。这就涉及到大量交互设计了，谈到交互就不得不说这两年大行其道的移动端各种动画，也就是俗称的各种 “H5”。得益于手机性能的大幅度提高，现在手机上至少对前端而言，性能瓶颈不是那么明显，当然，前端离不开浏览器（webview），所以总是有性能天花板了，要不然就真成 Native 应用了。

广义上讲的前端动画主要分三种：传统 js 动画、CSS3 动画、Canvas动画。传统 js 基本上就是用各种循环定时器、超时定时器不停操作 dom，Canvas 是一种更高级的 js 技术。本文不比较技术优劣，只介绍 CSS3 动画。
以上和以下都是个人见解总结，难免疏漏，还请见谅指正。

CSS3 核心 API

transform

其实不属于动画的范畴，因为是 CSS3 里的一个典型属性，所以一起说一下，可以对元素进行 2D 或 3D 转换，包括一系列的旋转、缩放等效果，是元素的静态样式。

transition

对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键帧。开始，结束。

通常和 hover 事件配合，和 js 联系紧密，可以理解为一次的动画效果，我个人也把它理解为简版的 animation ，具体属性和 animation 类似。

1	transition: property duration timing-function delay;

animation

对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键帧。

个人认为 animation 是 CSS3 动画的核心，甚至说，你熟悉了它就可以搞定几乎所有的 CSS3 动画。与 transition 的不通在于，和 js 联系不紧密，单纯的作为类似 flash 一样的动画存在。

1	animation: name duration timing-function delay iteration-count direction fill-mode play-state;

同时要配合 @keyframes

@keyframes name {
	form {
	}
	to {
	}
}

animation 参数说明

animation-name

与 @keyframes 后 name 一致，动画名称
animation-during

一个动画持续的事件，要带单位 s/ms
animation-timing-function

动画的速度曲线，又称之为缓动类型。
- liner 动画从头到位速度相同，一般用于平滑的效果
- ease 默认值，逐渐变慢
- ease-in 加速
- ease-out 减速
- ease-in-out 先加速再减速
- cubic-bezier 自定义贝塞尔曲线
- 除此之外还有个重要的值，step-start，可以实现一帧一帧播放的效果，在特殊场景有更好的效果
animation-delay

动画延迟执行的时间，需要单位 s/ms
animation-iteration-count

动画迭代的次数，可以设置具体的数值，默认值1，使用 infinite 关键字可以实现动画不间断播放
animation-direction

动画的前进方向，默认为 normal，代表正向播放，使用值 alternate，可以实现动画完成时的倒带效果
animation-fill-mode

填充模式，指的是动画的每个周期间的状态，通常使用默认值 none 就好。这个参数的详细说明在这篇文章有详细解释
animation-play-state

控制动画的运行状态，默认为 running，可选值 paused

demo

呼吸效果

外层圆圈主要 css

.circle {
	...
	animation: scale 2s ease infinite normal;
} 
@keyframes scale {
	0% {
		transform: scale(0);
		opacity: 0;
	}
	8% {
		transform: scale(.5);
		opacity: 1;
	}
	100% {
		transform: scale(2);
		opacity: 0;
	}		      
}

内层圆圈

.circle1 {
	...
	animation: scaleout 1s ease-in-out infinite alternate;
}
@keyframes scaleout {
	0% {
		transform: scale(1);
   	}
		100% {
  		transform: scale(2);
  	}		      
}

预览效果

无限扩散的水波纹

用四个重叠的圆圈来实现无限扩散效果，注意要计算好事件，比如整个扩散要 4s，那么4个圆圈之间的间隔是 1s，即每个圆圈要有 1s 递增的延迟。

.circle0 {
	...
	animation: animationcir 4s linear infinite normal;
}
.circle1 {
	...
	animation: animationcir 4s linear 1s infinite normal;
}
.circle2 {
	...
	animation: animationcir 4s linear 2s infinite normal;
.circle3 {
	...
	animation: animationcir 4s linear 3s infinite normal;
}
.fixedcircle {
	...
}
@keyframes animation2 {
	0% {
	}
	100% {
		transform: scale(4);
		opacity: 0;
	}	
}

预览效果

相关连接
CSS3 animation渐进实现点点点等待提示效果

CSS3 核心 API

transform

transition

animation

demo

CATALOG

FEATURED TAGS

FRIENDS