مثال على تحريك خاصية CSS border-left-محرر النصوص عبر الإنترنت (oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>مثال على انميات خاصية border-left CSS - تعليميات الأساس(oldtoolbag.com)</title>
<style>
.animated {
	width: 300px;
	padding: 40px 0;
	font: bold 46px sans-serif;
	text-align: center;
    background: #f5d8f4;	
    border: 2px solid orchid;
    -webkit-animation: test 4s infinite; /* Chrome, Safari, Opera */
    animation: test 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {border-left: 20px solid indigo;}
}
/* syntax القياسية */
@keyframes test {
    50% {border-left: 20px solid indigo;}
}
</style>
</head>
</body>
	<p> <strong>تحذير:</strong> لا تعمل CSS الأنماط في إصدارات إنترنت إكسبلورر 9 وأقل.</p>
<p> <strong>تنبيه:</strong> في جميع الخاصيات الفردية لـ border-left، فقط الخاصيات border-left-width وborder-left-color قابلة للتشغيل التلقائي في CSS. الخاصية border-style غير قابلة للتحريك. لمزيد من التفاصيل، راجع الخاصية <a href="https://ar.oldtoolbag.com/css-reference/css-border-left-property.html" target="_top">border-left</a>.</p>
	<div class="animated">Box</div>
</body>
</html>