به عنوان مثال، می خواهیم که برای یک عنصر div که پس زمینه آن رنگی است، هنگامی که کاربر موس خود را بر روی آن می برد، ابتدا 3 ثانیه تاخیر داشته باشیم و سپس، اندازه عرض عنصر div ، به تدریج بزرگتر شود. نتیجه نهایی به صورت زیر می باشد (موس خود را بر روی قسمت رنگی برده و لحظاتی صبر کنید) :
برای این منظور، کدهای صفحه را به صورت زیر می نویسیم :
<html>
<head>
<style type="text/css">
div {
width: 3em;
height: 3em;
background-color: red;
transition-property: width;
transition-duration: 4s;
transition-delay: 3s;
}
div:hover {
width: 10em;
}
</style>
</head>
<body>
<div>
</div>
</body>
<head>
<style type="text/css">
div {
width: 3em;
height: 3em;
background-color: red;
transition-property: width;
transition-duration: 4s;
transition-delay: 3s;
}
div:hover {
width: 10em;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
نکات مهم :
قابلیت TRANSITION در اینجا بعد از HOVER پیش می آید
حرکت انیمیشنی خاصی که می خواهیم اتفاق بیفتد باید در قسمت transition-property: قید شود
transition-duration: 4s; یعنی زمان کلی ای که نتیجه باید انجام شود به عبارت دیگر چیزی که می خواهید به صورت انیمیشن انجام شود بعد از (در این مثال) ۴ ثانیه به حالت نهایی و ماندگار خود می رسد
transition-delay: 3s یعنی باید عملی که در آن TRANSITION نوشته شده به مدت ۳ ثانیه مداوم انجام شود
