مثال تحريك خاصية padding-bottom في CSS - محرر النصوص عبر الإنترنت

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>مثال على انيميشن خاصية padding-bottom في CSS - تعليمية أساسية(oldtoolbag.com)</title>
<style>
.animated {
	padding: 10px;
 background: #ecb3c6;	
 border: 1px solid #d24875;
 -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
 animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
 50% {padding-bottom: 100px;}
}
/* syntax المعيارية */
@keyframes test {
 50% {padding-bottom: 100px;}
}
</style>
</head>
<body>
	 تحذير:: لا تعمل الأنيميشن بلغة CSS في إصدارات إنترنت إكسبلورر 9 وأقل.
 ملاحظة:：تم تغيير خاصية padding-bottom للعناصر المحددة من قيمتها الأصلية "10px" إلى "100px"، ثم العودة إلى القيمة الأصلية "10px"، حتى لا نهاء.
	الرسوم المتحركة يتم إنشاؤها عن طريق تحليل تعابير الشخصيات، الحركات، والتغيرات إلى العديد من لحظات الحركات، ثم تصويرها بشكل متسلسل بكاميرا لتكوين سلسلة من الصور، مما يخلق شعورًا بالتغير المستمر في البصر. أصل هذه المبدأ هو نفسه في الأفلام والتلفزيون، كلاهما يعتمد على مبدأ التخزين البصري. أظهرت الأبحاث أن البشر يمتلكون خاصية "التخزين البصري"، حيث لا يزال العين ترى اللوحة أو الكائن بعد أن يختفي في غضون 0.34 ثانية. باستخدام هذا المبدأ، إذا تم عرض اللوحة التالية قبل أن يختفي اللوحة الحالية، فإن ذلك سيخلق تأثيرًا متسلسلًا في البصر.
</body>
</html>