خاصية انتقال CSS

مرر مؤشر الماوس فوق عنصر <div> لتغيير العرض تدريجيًا من 100 بكسل إلى 300 بكسل:

div {
  width: 100px;
  transition: width 2s;
}

div:hover {
  width: 300px;
}

المزيد من الأمثلة "جربها بنفسك" أدناه.

التعريف والاستخدام

الخاصية هي transitionخاصية مختصرة من أجل:

ملاحظة: حدد دائمًا خاصية مدة الانتقال ، وإلا ستكون المدة 0 ثانية ، ولن يكون للانتقال أي تأثير.

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

تحدد الأرقام المتبوعة بـ -webkit- أو -moz- أو -o- الإصدار الأول الذي يعمل مع بادئة.

Property
transition	26.0 4.0 -webkit-	10.0	16.0 4.0 -moz-	6.1 3.1 -webkit-	12.1 10.5 -o-

transition: property duration timing-function delay|initial|inherit;

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

عندما يتم التركيز على <input type = "text"> ، قم بتغيير العرض تدريجيًا من 100 بكسل إلى 250 بكسل:

input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}

input[type=text]:focus {
width: 250px;
}