مثال على تحريك خصائص column-width في CSS3 - محرر أمثلة عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 column-width property animation example - Basic tutorial (oldtoolbag.com)</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;}
}
/* النحو القياسي */
@keyframes test {
 50% {column-width: 300px;}
}
</style>
</head>
<body>
	 التحذير: لا تعمل الأنماط CSS في إصدارات إنترنت إكسبلورر 9 وأقل.
 التحذير：عرض عرض الأعمدة في المقالات من قيمتها الأولية "100px" إلى "300px"، ثم العودة إلى القيمة الأولية "100px" حتى الأبد زمن.
	يُعتقد غالبًا أن الفيديو والرسوم المتحركة هما نفس الشئ، لأنهما ينتميان إلى فئة "الصور المتحركة". الصور المتحركة هي سلسلة من الصور الثابتة أو الرسومات التي تتغير بشكل مستمر على طول المحور الزمني، مما يخلق شعورًا بالحركة. الرسوم المتحركة تُصنع عن طريق تفكيك تعابير الشخصيات، والحركات، والتغيرات، وتسجيلها كعديد من اللقطات للحركات، ثم تصويرها بشكل متتابع لتكوين سلسلة من الصور، مما يخلق شعورًا بالتغير المستمر في الصور. المبدأ الأساسي لها مشابه للسينما والتلفزيون، حيث تعتمد على مبدأ الإبقاء على الصور في العين. أثبتت الطببيعة البشرية أن لدينا خاصية "الإبقاء على الصور في العين"، حيث لا تزول العين من الصورة أو الجسم بعد رؤيتهما لمدة 0.34 ثانية. باستخدام هذه المبدأ، إذا تم عرض الصورة التالية قبل أن تزول الصورة السابقة، فإن ذلك سيخلق شعورًا بالتغير المستمر في الصور. الرسوم المتحركة تُصنع عن طريق تفكيك تعابير الشخصيات، والحركات، والتغيرات، وتسجيلها كعديد من اللقطات للحركات، ثم تصويرها بشكل متتابع لتكوين سلسلة من الصور، مما يخلق شعورًا بالتغير المستمر في الصور. المبدأ الأساسي لها مشابه للسينما والتلفزيون، حيث تعتمد على مبدأ الإبقاء على الصور في العين. أثبتت الطببيعة البشرية أن لدينا خاصية "الإبقاء على الصور في العين"، حيث لا تزول العين من الصورة أو الجسم بعد رؤيتهما لمدة 0.34 ثانية. باستخدام هذه المبدأ، إذا تم عرض الصورة التالية قبل أن تزول الصورة السابقة، فإن ذلك سيخلق شعورًا بالتغير المستمر في الصور.
</body>
</html>