البحث في الموقع

أساسيات التعريف والاستخدام @-webkit-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes NAME-YOUR-ANIMATION { 0% { opacity: 0; } 100% { opacity: 1; } } #box { -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ } تنبيه: لتجنب الإطالة، لن نستخدم في بقية الشيفرات البرمجية في هذه الصفحة أي بادئات، ولكن تذكَّر استخدامها في الشيفرات النهائية. الخطوات المتعددة @keyframes fontbulger { 0% { font-size: 10px; } 30% { font-size: 15px; } 100% { font-size: 12px; } } #box { animation: fontbulger 2s infinite; } إن كان للحركة خاصيتي البداية والنهاية نفسهما، فيمكنك صياغة ذلك بوضع فاصلة بين القيمتين 0% و ‏100%‏: @keyframes fontbulger { 0%, 100% { font-size: 10px; } 50% { font-size: 12px; } } أو يمكنك جعل الحركة تحدث مرتين (أو أيّ عدد زوجي من المرات)، وإعطاء الخاصية animation-direction القيمة alternate. استدعاء إطارات الحركة المفتاحية عبر خاصيات منفصلة .box { animation-name: bounce; animation-duration: 4s; /* Xms :أو */ animation-iteration-count: 10; animation-direction: alternate; /* normal :أو */ animation-timing-function: ease-out; /* ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) :أو */ animation-fill-mode: forwards; /* backwards, both, none :أو */ animation-delay: 2s; /* Xms :أو */ } الصياغة المختصرة للحركات في الصياغة المختصرة، ضع فاصلة بين كل القيم. لا يهم ترتيب القيم إلا في حال استخدام كل من المدة (duration) والتأخير (delay)، إذ يجب أن يكونا بهذا الترتيب. في المثال أدناه: 1s = المدة، 2s = التأخير، 3 = التكرار. animation: test 1s 2s 3 alternate backwards الجمع بين الخاصيتين transform و animation @keyframes infinite-spinning { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } الحركات المتعددة يمكنك الفصل بين القيم بفواصل للتصريح بحركات متعددة على مُحدّد (selector) معيّن: .animate-this { animation: first-animation 2s infinite, another-animation 1s; } الدالة‏ Steps()‎ تتحكم الدالة Steps()‎ بعدد الإطارات المفتاحية (keyframes) التي ستُصَيَّر في الإطار الزمني للحركة. في المثال التالي: @keyframes move { from { top: 0; left: 0; } to { top: 100px; left: 100px; } } إذا استخدمت Steps(10)‎ في الخاصية animation، فلن تُعرَض إلا 10 إطارات مفتاحية في الوقت المخصص. الحساب متسق هنا. ففي كل ثانية، سيتحرك العنصر بمقدار 10 بكسل (10px) إلى اليسار، و 10 بكسل إلى أسفل، حتى تنقضي مدة الحركة، ثم يحدث الأمر نفسه مرة أخرى في الاتجاه المعاكس، وهكذا دواليك. يمكن أن يكون هذا مناسبًا للحركات التي تعتمد على تمرير الصور (spritesheet animation)، مثل هذا المثال. دعم المتصفحات جلبنا بيانات دعم المتصفحات المعروضة هنا من الموقع Caniuse، يمكنك أن تجد تفاصيل أكثر عليه. يشير الرقم الموجود إلى جوار اسم المتصفح إلى أنّ ذلك المتصفح يدعم الميزة منذ ذلك الإصدار وما فوق. المصادر ترجمة وبتصرف للمقالة Keyframe Animation Syntax لصاحبها Chris Coyier.

قد يزور عميلك المُحتمل موقعك الشّخصي الآن بينما تقرأ هذا المقال، سمع عنك ذلك العميل واعتقد بأنّه من العظيم أن يتعامل معك، ولحسن حظّك فإن له ميزانيّةٍ عالية. لكن ما إن تصفّح ذلك العميل موقعك حتّى غيّر رأيه، لم يتصل بك، وبدلًا من ذلك تراجع وذهب ليبحث عن شخصٍ آخر. هل تريد ذلك أن يحدث ؟ بالتأكيد لا. لكنّه يحدث أكثر مما تعتقد، لذلك دعنا نصلح الأمورَ الآن. موقعك الشّخصي الذي تعرض خدماتك من خلاله قد يشوّه صورتك ويجعلك تبدو ضيّق الأفق، ساذجًا، غير كفءٍ، عديمَ الخبرة، أو قد يُعطي الانطباع بأنّك تُعاني من جميع هذه العُيوب. يؤسفني قولُ ذلك، لكنّ هذا الأمر صحيحٌ في 80% من الأوقات ولهذا أرغب في التّحذير من الأمر. عندما تقوم بأحد هذه الأخطاء التّالية في موقعك، فإنه لن يخدمك أو يلمِّع اسمك: الإفراط في الرسميّة، فالطريقة المتكلّفة تصنع فجوةً بينك وبين العملاء.أن تكون ودودًا بشكلٍ مفرط ومبتعدًا عن الرسميّة، من المفترض ألا تستخدم الاختصارات أو الوجوه التعبيرية وألا تنشر معلوماتٍ عن حياتك الخاصة على موقعك الإلكتروني.الإلحاح واللهث وراء زيادة المبيعات، أساليب المبالغة والضغط غالبًا ما تصدُ العملاء المحتملين.اختلاف لهجتك على مختلف صفحات الموقع بشكلٍ كبير لسعيك لكسب رضا الجميع.الكتابة عن نفسك بضمير الغائب، كأن تقول: "ندى أشرف كاتبة ومدوِّنة مستقلة".الكتابة عن نفسك بصيغة الجمع، كأن تقول: "راسلنا وسنرد عليك في أقرب وقت".ألا تكتب مُحتوى موقعك الإلكترونيّ بنفسك.بالتأكيد هناك استثناءات لهذه القواعد العامّة فلربّما تحتاج أن تستخدم اللغة الرسميّة بشكلٍ أكبر في موقعك ليناسب سوقك المستهدف مثلًا. أنت الأكثر درايةً بنوع العملاء الذين تستهدفهم وتريد أن تجذبهم لموقعك. لكن إن كنت لا تملك أسبابًا منطقيّة لاختيارك الطريقة التي تكتب بها في موقعك، فقد حان الوقت لأن تفكّر في الأمر بمزيدٍ من العمق. الكتابة بصوت يُعبّر فعليّا عنك هي رهانك الرابح عندما تكتب عن نفسك وخدماتك، سواءً كنت مدوّنًا على الإنترنت أو كاتبًا على أرض الواقع. لماذا الكتابة بصوت يعبر بصدق عنك هي أفضل ما يمكنك القيام بهيزور عميلك المحتمل موقعك ليعرف المزيد عنك وعن شخصيّتك، وبناءً على ذلك يقرّر إن كان يناسبه التعامل معك أم لا. كتابة رسالةٍ مناسبةٍ للقارئ، رسالةٌ واضحة وحقيقيّة، تجعلك تقطع شوطًا طويلًا، سواءً في مجال صياغة موقعك أو الربح من خدماتك. الرسالة الرئيسية التي تريد إيصالها من الموقع الذي تعرض خدماتك من خلاله هي: "وظّفني فأنا أهلٌ لذلك" لا يتوجّب عليك ذكر ذلك صراحةً -رغم أنّ القيام بذلك قد يكون السّبب الذي قد يدفع بأصحاب بعض المشاريع إلى توظيفك- بيانُ أهليّتك وكفاءتك أولويّة، وتستطيع أيضًا إضافة أسبابٍ إضافيّة تغري العملاء المحتملين بالتعامل معك. تستطيع التغلُّب على قلّة الخبرة بالحماسة وامتلاك مهارات التعلم، وبإمكانك أن تتغلب على قلّة معرفتك بالبحث. ارتكابُ هذه الأخطاء –التي ذُكِرت في المقال- في موقعك قد يجعل العميل يتوجّس منك خيفة ويخشى التعامل معك. كيف تستعيد صوتك المتفردلا تقلق، لكلّ مشكلةٍ حل، إذا كانت صياغة موقعك لا تعبّر عنك بشكل جيّد، فأمامك 4 خطوات بسيطة لتعالج هذا الأمر: اطلب من أحد أصدقائك أن يجري مقابلةً معك عن عملك، خبراتك وخلفيّتك الثقافيّة، والخدمات التي تقدمها. استعمل هذه المقابلة كمرجعٍ لصياغة مُحتوى موقعك الشّخصي، حاول أن تحافظ على طريقتك الطبيعية غير المتكلّفة عندما تكيّف نصّ المقابلة ليتناسب مع موقعك.اقرأ الصيغة الحاليّة من موقعك بصوتٍ مرتفع لشخصٍ يعرفك جيّدًا. اطلب منه أن يرفع يده كلّ مرّةٍ لا يشعر فيها أنّ الكلام يصفك فعليّا، وسيسلط ذلك الضوء على النواحي التي يجب عليك تعديلها.حدّد سوقك المستهدف لتستطيع تكييف صياغة موقعك لجذب العملاء المثاليين، تخيّل أنّك تُجري محادثةً معهم على انفراد.اطّلع على مواقع المستقلين الذين تنظر لهم بعين الإعجاب، حلّل كيف أشبعوا مواقعهم من شخصيّاتهم المتفرّدة، ولاحظ العناصر الناجحة التي تستطيع محاكاتها.عندما تستخدم صوتك الخاص للتعبير عن نفسك، سيفهم العملاء أكثر من تكون. ستجذب المشاريع التي تناسبك، وستتجنب إضاعة وقتك في تلك التي لا تناسبك. كل ما عليك فعله -ببساطةٍ- هو أن تكون "أنت"، وأنت تسمح لموقعك أن يُظهر جانبًا من شخصيتك. ترجمة -وبتصرف- للمقال Why Your Freelance Writer Website Makes You Sound Like an Idiot لصاحبته Sophie Lizard. حقوق الصورة البارزة: Designed by Freepik.