CSS3 – transitions

  1. Introduction
  2. Transition Properties
  3. Shorthand transitions

                  *********************************************************

Introduction

النهارده هنناقش سوا ف الترانزيشنز/ الانتقالات …. خلونا نبدء بمثال بسيط عشان نفهم الدنيا ماشيه ازاى

لو عاوزه  اما اقف ع لينك اغير الخلفيه بتاعه من لون لاخر ياترى اعمل  ايه ؟

اكيد اى حد هيقولى ببساطه خالص استخدمى ال
hover

 وغيرى الخلفيه بيه وهيغيرها بكل بساطه ذى كده

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


اوك تمام
ده اللى كلنا بنعمله بس لو انا واحد عاوز اعمل شىء مختلف شويه
عارفين الفلاش لما اجى ف كل فريم واغير لون الخلفيه مثلا لباتون او لينك بحيث ان اللون يتغير بالتدريج ؟
اهو انا عاوزه ده من غير فلاش عاوزاه بالسى اس اس

هل اقدر اعمله ؟!

 🙂 مفيش شىء مستحيل
طب اعمله ازاى ؟

هعمله بالترانزيشنز/الانتقالات
تمام يبقى انا عرفت الترانزيشنز حالا انها بتسخدم  لما اعمل اى ايفكت/ تاثير ع باتون او لينك او غيرهم

تمام جداا بس عشان استخدم الترانزيشنز او اعمل ايفكت محتاجه حاجتين

اول شىء محتاجه انى احدد الخاصيه اللى عاوزها تتاثر سواء حجم او لون او غير ذلك
تانى حاجه الزمن اللى هتتغير فيه
مثلا عشان اغير لون باتون من اخضر لاسود هيتغير ف مده اد ايه

transition: property  “duration ” == transition width 2s

بقوله هتعمل الترانزيشن ع الويدث ومده الترانزيشن بتاعى ثانيتين

<html>
	<head>
		<style type="text/css">
			a.foo
			{
			background:#9c3;
			-webkit-transition:background 6s; /* safari and Chrome */
			}
			a.foo:hover
			{
			background:#690;
			}
		</style>
	</head>
	<body>
		<a href="#" class="foo"> Transition me !</a>
	</body>
</html>


انا حاليا قبل ما احط الماوس ع اللينك هيكون لون الخلفيه اخضر هنا بقوله انا هعمل الترانزيشن ع الخلفيه وبديها لون اخضر غامق

واما يعمل الترانزيشنزهيعمله ع الخلفيه ومدته6 ثوانى والبراوزر بتاعى كروم او سفارى
اول ما الماوس يقف ع اللينك يبدء اللون تدريجيا يتحول الى اللون الاخضر الغامق

طبعا ممكن تطبق ع اى خاصيه اخرى او اكثر من خاصيه عن طريق دمجهم سوا

مثال
width & height & rotate

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* safari and Chrome */
			}
			div:hover
			{
			width:100px;
			height:100px;
			-webkit-transform:rotate(180deg);  /* safari and Chrome */
			}
		</style>
	</head>
	<body>
		<div>Hover over me to see the transition effsct ! </div>
	</body>
</html>

Try With Yourself 😀

                  *********************************************************

Transition Properties

عندنا اربع خصائص بتستخدم مع الترانزيشنز

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

1-transition-property

transition-property: none|all|property;

من اسمها هى الخاصيه اللى هطبق عليها الترانزيشن سواء
width, height , background ,……,etc

بتاخد قيم اما انها ماتعملش اى الترانزيشنز وطبعا بحتاجها ف حالات معينه

او انها تطبق ع كل البروبرتز او تطبق  ع بروبرتى معينه وف الحاله دى بكتب اسمها

2-transition-duration

transition-duration: time;

وهى المده اللى هياخدها الترانزيشنز عشان يتنفذ
مثال لو هغير لون من ازرق لاسود مثلا الانتقال او التدريج بيبقى ف فتره اد ايه
هل ثانيه ولا اتنين ولا اكتر

3-transition-timing-function

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

ازاى السرعه اثناء الترانزيشن بتكون  ودى بتاخد قيمه من القيم دى

(ease (Default value) ,linear, ease-in, ease-out, ease-in-out, and cubic-bezier)

4-transition-delay

transition-delay: time;

بيحدد الوقت اللى الترانزيشن هيبدء فيه الديفولت بتاعه “صفر” اى انه يبدء الترانزيشن

علطول , ممكن اخلى الترانزيشن يتاخر شويه ثانيه او اتنين وهكذا

<html>
	<head>
		<style type="text/css">
			div
			{
			width:100px;
			height:100px;
			background:red;
			-webkit-transition-property:width ;
			-webkit-transition-duration:1s;
			-webkit-transition-timing-function:linear;
			-webkit-transition-delay:2s;
			}
			div:hover
			{
			width:200px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>

                  *********************************************************

Shorthand transition

دى طريقه مختصره لكتابه الكود بدل ما اكتب كل بروبرتى وقيمتها لا هعمل طريقه مختصره بحيث انى اكتب القيم بس

طب نجرب نفس المثال السابق بس بالطريقه المختصره دى

<html>
	<head>
		<style type="text/css">
			div
			{
			width:20px;
			height:50px;
			background:red;
			-webkit-transition:width 1s linear 2s;
			}
			div:hover
			{
			width:60px;
			}
		</style>
	</head>
	<body>
		<div> </div>
	</body>
</html>





                  *********************************************************

Good Luck 🙂
Maha Elbasuony

,

%d bloggers like this: