3.5 KiB
| title | localeTitle |
|---|---|
| CSS3 Transitions | التحولات CSS3 |
التحولات CSS3
قد يكون استخدام عمليات النقل من CSS3 مفيدًا إذا كنت تريد أن يكون تطبيقك أو صفحتك على الويب أكثر ديناميكية وحسن المظهر.
في الواقع ، تسمح لك الانتقالات بتغيير قيم الخاصية ( width ، color ، ...) بطريقة سلسة .
الخاصية transition هي خاصية مختزلة لخاصية transition-property ، transition-duration transition-timing-function ، transition-timing-function transition-delay ، وبناء الجملة هو ما يلي:
transition: transition-property transition-duration transition-timing-function transition-delay
فمثلا :
transition: width 2s ease-in-out 1s;
وصف الخصائص
transition-property
حدد اسم الموقع الذي يجب عليك تطبيق النقل عليه:
background-colorcolorwidthheightmarginborder-radius- وما إلى ذلك وهلم جرا !
فمثلا :
transition-property: width; /* means the transition applies on the width */
transition-duration
حدد عدد الثواني أو الألف من الثانية التي يجب أن يستغرقها الانتقال:
فمثلا :
transition-duration: 2s /* means the transition effect last 2s */
transition-timing-function
حدد منحنى السرعة لتأثير الانتقال. وبالتالي ، يمكنك تغيير سرعة انتقالك على مدار مدته .
فيما يلي القيم الأكثر استخدامًا:
lineareaseease-inease-outease-in-outcubic-bezier(n, n, n, n)
فمثلا :
transition-timing-function: linear
ملاحظة: جميع القيم المذكورة أعلاه هي في الواقع تفاصيل cubic-bezier . linear ، على سبيل المثال ، تعادل cubic-bezier(0.25,0.1,0.25,1)
يمكنك تجربة ومعرفة المزيد عن بيزييه مكعب هنا
transition-delay
حدد خلال ثوانٍ أو ميلي ثانية عندما يبدأ النقل .
فمثلا :
transition-delay: 1s /* means wait 1s before the transition effect start */
كيفية استخدام التحولات؟
يمكنك كتابة انتقال بطريقتين:
استخدام الخاصية المختزلة ( transition )
`div { width: 200px; transition: all 1s ease-in-out; }
div:hover { width: 300px; } `
إعطاء جميع خصائص النقل قيمة
div { width: 200px; transition-property: width; transition-duration: 1s; transition-timing-function: ease-in-out; }
ملاحظة: كلا المثالين متساويان
أمثلة
إليك بعض الأقلام البسيطة التي تحتوي على انتقالات بسيطة: