Transition CSS3 - TRAIDNT

إعداد محمد الحلبي معهد ترايدنت | TRAIDNT.NET

HTML

<input type="text" class="halabi" placeholder="أدخل بريدك هنا">
<input type="text" class="traidnt" placeholder="هذا اasdل بالشكل الافتراضي">
<div class="button">محمد asddiv>

CSS

body{
    padding:30px;
    direction:rtl;
}
*{outline:none;}
/* هنا بداية الأكواد الخاصة بنا */
/* الحقل الذي يحمل خاصية الحركة */
input[type="text"].halabi{
    width: 200px;
    height: 30px;
    padding: 0 10px;
    color: #666666;
    margin-bottom:20px;
    border:3px solid #cccccc;
    font:normal 11px Tahoma;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
           border-radius: 5px;
    /* هنا نضع الكود الذي يتيح لنا خاصية الحركة */
    -moz-transition:border 0.2s linear 0;
    -webkit-transition:border 0.2s linear 0;
    -ms-transition:border 0.2s linear 0;
       transition:border 0.2s linear 0;
}
input[type="text"].halabi:focus{
    border-color:#f28627;
}
/* زر بالشكل العادي والافتراضي */
input[type="text"].traidnt{
    width: 200px;
    height: 30px;
    padding: 0 10px;
    color: #666666;
    margin-bottom:20px;
    border:3px solid #cccccc;
    font:normal 11px Tahoma;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
           border-radius: 5px;
}
input[type="text"].traidnt:focus{
    border-color:#449ec3;
}