CSS3 column-width 属性动画-在线运行代码案例-大卫编程网

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 column-width 属性动画示例- 基础教程(div.cn)</title>
<style>
.animated {
	padding: 15px;
	border: 1px solid #000;
	-webkit-column-width: 100px; /* Chrome, Safari, Opera */
 -moz-column-width: 100px; /* Firefox */
 column-width: 100px;
 -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
 animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
 50% {-webkit-column-width: 300px;}
}
/* Standard syntax */
@keyframes test {
 50% {column-width: 300px;}
}
</style>
</head>
<body>
	 警告：：CSS动画在Internet Explorer 9和更早版本中不起作用。

注意：以下多列段落的列宽从其初始值“ 100px”变为“ 300px”，然后再次返回至初始值“ 100px”，直至无穷大 时间。
	动画和视频经常被认为是同一个东西，主要是缘于它们都属于“动态图像”的范畴。动态图像是连续渐变的静态图像或者图形序列，沿时间轴顺次更换显示，从而产生运动视觉感受的媒体形式。动画是通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，再用摄影机连续拍摄成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。利用这一原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。动画是通过把人物的表情、动作、变化等分解后画成许多动作瞬间的画幅，再用摄影机连续拍摄成一系列画面，给视觉造成连续变化的图画。它的基本原理与电影、电视一样，都是视觉暂留原理。医学证明人类具有“视觉暂留”的特性，人的眼睛看到一幅画或一个物体后，在0.34秒内不会消失。利用这一原理，在一幅画还没有消失前播放下一幅画，就会给人造成一种流畅的视觉变化效果。.
</body>
</html>