انتقالات Css3. الانتقال السلس للخصائص المتعددة

لا يدعم Internet Explorer خاصية النقل بعد.

يتطلب Firefox 4 البادئة -moz-.

يتطلب كل من Chrome و Safari البادئة -webkit-.

تتطلب Opera البادئة -o-.

كيف تعمل؟

انتقالات CSS3 هي تأثيرات تسمح للعنصر بالتغيير بسلاسة من نمط إلى آخر.

للقيام بذلك ، يجب عليك تحديد شيئين:

• حدد خاصية CSS التي تريد إضافة التأثير إليها
• تحديد مدة التأثير.

مثال تأثير الانتقال لخاصية العرض ، المدة: ثانيتان: شعبة { الانتقال: عرض 2 ثانية ؛ -موز-الانتقال: عرض 2 ثانية ؛ / * Firefox 4 * / -webkit- الانتقال: عرض 2s ؛ / * سفاري وكروم * / -o-Transition: عرض 2s ؛ / * أوبرا * / }

تعليق: إذا لم يتم تحديد خاصية المدة ، فلن يحدث انتقال سلس لأن القيمة الافتراضية هي 0.

سيبدأ التأثير عندما تبدأ خاصية CSS المحددة في التغيير. عادةً ما يكون تأثير الانتقال (التغيير السلس لخصائص CSS) مرتبطًا باللحظة التي يحرك فيها المستخدم الماوس فوق العنصر:

مثال تحديد: قم بالمرور فوق العناصر : تعليق: عندما يتحرك مؤشر الماوس خارج منطقة عنصر ما ، فإنه يتحول بسلاسة إلى نمطه الأصلي. عدة تغييرات لإضافة تأثير إلى أكثر من نمط ، حدد خصائص متعددة مفصولة بفواصل: مثال إضافة تأثيرات تغيير العرض والارتفاع والتحول: خصائص الانتقال يسرد الجدول التالي جميع خصائص الانتقال: خاصية وصف CSS انتقال خاصية اختصار (اختصار) لتعيين أربعة خصائص انتقالية في خاصية واحدة 3 انتقال الملكية يحدد اسم خاصية CSS التي يجب تطبيق الانتقال عليها 3 مدة الانتقال تحدد المدة التي سيستغرقها الانتقال. الافتراضي 0 3 وظيفة توقيت الانتقال يصف كيف ستتغير سرعة الانتقال. الافتراضي هو "سهولة" 3 تأخير الانتقال يحدد متى سيبدأ الانتقال. الافتراضي هو 0 3 يعين مثالان أدناه كل خصائص النقل: مثال استخدام كل خصائص الانتقال في مثال واحد: شعبة { خاصية الانتقال: العرض ؛ مدة الانتقال: 1 ثانية ؛ وظيفة توقيت الانتقال: خطي ؛ تأخير الانتقال: 2 ثانية ؛ Moz- ترانزيت-خاصية: العرض ؛ -مدة الانتقال: 1 ثانية ؛ -موز-انتقال-توقيت-وظيفة: خطي ؛ -موز-انتقال-تأخير: 2 ثانية ؛ / * سفاري وكروم * / خاصية -webkit-transfer-property: العرض ؛ -فترة انتقال -webkit: 1 ثانية ؛ -وظيفة توقيت التحويل في حزمة الويب: خطية ؛ -تأخير انتقال مجموعة الويب: 2 ثانية ؛ / * أوبرا * / - خاصية الانتقال: العرض ؛ مدة الانتقال: 1 ثانية ؛ - وظيفة توقيت الانتقال: خطي ؛ - تأخير الانتقال: 2 ثانية ؛ }

تاريخ النشر: 2011-10-16



خاصية انتقال يشير إلى خصائص CSS3 الجديدة. دعنا نتعرف عليه بشكل أفضل.

لقد اعتدنا جميعًا على حقيقة أنه عندما تحوم بالماوس ، يتغير لون الرابط. في هذه الحالة ، يتغير اللون فجأة ، دون انتقال سلس. خاصية انتقال سيسمح لك بإضافة القليل من الرسوم المتحركة على تغيير اللون دون استخدام JavaScript.

تنص مواصفات هذه الخاصية على ما يلي:

تسمح انتقالات CSS بتغييرات الخصائص في قيم CSS لتحدث بسلاسة خلال مدة محددة.

بمعنى آخر ، تتيح لك انتقالات CSS تعيين التغييرات على خصائص CSS بسلاسة وعلى مدار الوقت.

تطبيق الملكية انتقال يمكنك استخدام أي شيء - الخلفية واللون والطول وحجم الخط وما إلى ذلك. هذه هي الخصائص التي تحدد لونًا أو خصائص يمكن التعبير عنها بوحدات الطول (px ، em ، ex) أو كنسبة مئوية. يمكننا أيضًا استخدام: التركيز و: الفئات الزائفة النشطة كحدث.

المتصفحات

سأخبرك على الفور عن المتصفحات - لم يتم اعتماد المعيار الجديد بعد ، لذلك في الوقت الحالي ، تحتاج إلى استخدام بادئات -webkit- و -moz- و -o-. من هنا يمكنك أن ترى أن الخاصية مدعومة من قبل المتصفحات Chrome و Safari و Opera 10.5+ و Firefox 4+. Internet Explorer "المحبوب" ، كما هو الحال دائمًا ، عاطل عن العمل ، ولن يرى المستخدم أي رسوم متحركة.

في هذه المقالة استخدمت البادئة -webkit-لذلك فإن جميع الأمثلة الواردة هنا ستعمل فقط في Chrome و Safari.

لنفكر في مثال بسيط - أضف انتقالًا سلسًا لخلفية الرابط

بادئ ذي بدء ، دعنا نتذكر كيف يتم التغيير المعتاد للون الرابط عند تمرير الماوس.

لنستخدم الآن خاصية CSS انتقال لتغيير خلفية الارتباط بسلاسة. لنقم بإنشاء فصل دراسي جديد يكون مطابقًا للفصل بسيط وإضافة بعض الأسطر الجديدة:

A.cool (padding: 5px 10px ؛ الخلفية: # 69f ؛ اللون: # 000 ؛ -webkit-transfer-property: background ؛ -webkit-transfer-duration: 0.5s ؛ -webkit-transfer-time-function: easy ؛) a.cool: hover (الخلفية: # 33f ؛ اللون: #fff ؛)

لنقم بإنشاء رابطين اختباريين ونرى النتيجة:

الآن يتغير لون خلفيتنا بسلاسة في غضون نصف ثانية! من المثال يمكنك أن ترى أننا أضفنا ثلاثة سطور جديدة بخصائصها -webkit-transfer-property، -webkit-transfer-period، -webkit-transfer-time-function.

في الواقع ، يمكن دمجها في خاصية واحدة:

الانتقال من Webkit: الخلفية 0.5s سهلة ؛

يمكنك أيضًا إضافة تغيير سلس إلى لون النص:

A.cool2 (padding: 5px 10px؛ background: # 69f؛ color: # 000؛ -webkit-transfer: background 0.5s easy، color 1.0s easy؛) a.cool2: hover (background: # 33f؛ color: #fff) ؛)

عند تمرير الماوس ، سيقوم هذا الرمز بتغيير لون الخلفية بسلاسة لمدة نصف ثانية ولون الخط لمدة ثانية واحدة. نحن نفحص:

إذا كنا سنستخدم نفس المعلمات للرسوم المتحركة ، فيمكننا استخدام التعبير: -webkit-transfer: all 0.5s easy؛

الآن سيتم تطبيق تأثير الانتقال على جميع الخصائص المتغيرة بنفس المعلمات - 0.5 ثانية ، تأثير سهل.

يمكنك أيضًا إضافة تأخير للتأثير باستخدام تأخير الانتقال:

A.cool3 (padding: 5px 10px؛ background: # 69f؛ color: # 000؛ -webkit-transfer: all 0.5s easy؛ -webkit-transfer-delay: 0.5s؛) a.cool3: hover (background: # 33f ؛ اللون: #fff ؛)

الآن سيتم تشغيل الرسوم المتحركة نصف ثانية بعد تمرير الماوس. دعنا نتحقق فقط في حالة:

الجدول المرجعي

من أجل استيعاب المواد بشكل أفضل ، أوجه انتباهكم إلى جدول مرجعي صغير.

الانتقال - الخاصية الخاصية التي نطبق عليها الرسوم المتحركة. فقط عن أي خاصية CSS: اللون ، الخلفية ، العرض ، حجم الخط ، إلخ. مدة الانتقال مدة الرسوم المتحركة. الوقت بالثواني. وظيفة توقيت الانتقال وظيفة التوقيت المستخدمة في الرسوم المتحركة: سهولة ، خطية ، سهولة في الخروج ، سهولة الدخول ، سهولة الخروج ، تأخير انتقال مكعب بيزير ، تأخير الرسوم المتحركة. الوقت بالثواني.

خاصية CSS Transition مطلوبة لتعيين انتقال الحركة من حالة إلى أخرى. تعمل الرسوم المتحركة مع: hover و: العناصر الزائفة النشطة ، أي عندما ينتقل كائن من حالة إلى أخرى.

صيغة انتقال CSS

الانتقال: [بلا | ] || || || ;

يبدو بناء الجملة شاقًا جدًا ، لكنه في الحقيقة بسيط. دعونا نلقي نظرة على كيفية عملها بأمثلة بسيطة. بعد مثالين ، سيتم تحليل كل عنصر من عناصر البنية:

أمثلة مع خاصية الانتقال

مثال 1. الرسوم المتحركة في HTML عبر الانتقال

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

Чтобы все остальные объекты не смещались из-за увеличивающегося квадрата, можно использовать свойство свойство transform .

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

• all - ко всему объекту (можно опустить, если задано время)
• color - к цвету текста
• background - к цвету фона объекта
• width , height - к изменению габаритов по ширине и высоте соответственно
• none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration : 1s ;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

Синтаксис transition-timing-function

transition-timing-function : value ;

Где value может принимать значения:

• ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
• step-start - мгновенный старт, равносильно параметру steps(1, start)
• step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
• cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
• steps(a,b) - изменение рывками

Например

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

На странице преобразуется в следующее

Пример сложной трансформации с задержками

Браузеры

Не все браузеры поддерживают трансформацию. Необходимо использовать вендорные префиксы CSS :

• -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform-origin - для Chrome, Safari, Android и iOS
• -o-transform-origin - для Opera до версии 12.10
• -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

document.getElementById("elementID").style.transition

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс:hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

Blok { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok:hover { background-color:#000000; color:#ffffff; }

А вот, как это выглядит:

Наведи на меня

Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:

Blok1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok1:hover { background-color:#000000; color:#ffffff; width:355px; }

Вот, как это будет выглядеть в данном случае:

Наведи на меня

Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition .

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

Div { transition:color 1s 1s linear; }

Вместо указанных значений естественно можно применить и другие. Большинство браузеров до сих пор не воспринимают данное свойство в его стандартном виде, поэтому необходимо использовать префиксы.

Div { transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; }

В примерах был указан короткий вариант записи, подробный имеет следующий вид:

Div { transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition-delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; }

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

Свойство transition-timing-function определяет, как будут изменяться промежуточные значения в течение перехода, другими словами, как будет меняться скорость перехода в течение времени, которое задано в свойстве transition-duration. К примеру, переход может начаться быстро, но под конец замедлиться, или же не менять своей скорости в течение всего времени. Transition-timing-function может иметь следующие значения:

• linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
• ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
• ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
• ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
• ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

Наведите на следующий блок мышкой и посмотрите сами, как осуществляется переход при той или иной функции.

Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

Primer_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; } .primer_1:hover { background-color:#000000; color:#ffffff; width:355px; }

Наведи на меня

В примере была применена линейная функция, далее в посте буду использовать именно ее. Вы же естественно можете применять совершенно любую. В transition-property было использовано значение all, то есть все возможные свойства, а именно цвет фона, цвет текста и ширина, меняли свои значения в течение одинакового времени и с использованием одной и той же функции. Чтобы каждое свойство менялось по-разному, нужно прописывать их через запятую с разными значениями. Вот так:

Primer_1_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; } .primer_1_1:hover { background-color:#000000; color:#ffffff; width:355px; }

Наведи на меня

В данном случае все свойства меняли свои значения по очереди, начиная с цвета фона и заканчивая шириной. У каждого свойства была задана своя функция.
Пример 2.
С цветами и размерами разобрались. Теперь давайте сделаем исчезающий в движении блок.

Primer_2 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_2:hover { opacity:0; margin-left:50px; }

Наведи на меня

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

Primer_3 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz-transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; } .primer_3:hover { text-shadow:0 0 15px #ffffff; }

Наведи на меня

Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.

Primer_4 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition:-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; } .primer_4:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }

Наведи на меня

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на , чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом:active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

Primer_5 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_5:active { width:375px; height:85px; }

Нажми и держи

Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом:active.

Способов использования свойства CSS transition на самом деле очень и очень много, уверен, в будущем их станет еще больше. Я привел лишь самые простые примеры, чтобы продемонстрировать transition в действии. Ссылки, кстати, на моем блоге меняют свой цвет при наведении на них мышкой именно при помощи него. Думаю, я вам порядком надоел серым прямоугольником, но зато на нем удалось отлично показать все, что я хотел. В сочетании с другими свойствами и графикой transition может вытворять очень красивые вещи. Пробуйте!