تاخیر انیمیشن css3. مثال - انیمیشن css معکوس

لازم نیست انیمیشن CSS بلافاصله پس از شروع اولیه شروع شود. می توانید زمان شروع استفاده از ویژگی transition-delay را کنترل کنید. برای به تعویق انداختن انتقال برای یک زمان خاص، آن را در مقدار ویژگی مشخص کنید:

انتقال-تاخیر: 1 ثانیه; /* یک ثانیه تاخیر در شروع انیمیشن */

این ویژگی هنگام اجرای تعامل ساده در یک وب سایت استفاده کمی می کند، اما اگر مجبور به ایجاد افکت های پیچیده تر باشید، می تواند بسیار مفید باشد. با قیاس با transition-duration، می توانید زمان تاخیر را برای هر ویژگی مشخص شده در transition-property بنویسید (همچنین رعایت ترتیب شمارش مهم است):

ویژگی انتقال: رنگ، رنگ پس‌زمینه، فاصله حروف. انتقال-مدت: 1 ثانیه، 0.5 ثانیه، 2 ثانیه؛ انتقال-تاخیر: 0s، 0s، 2s. /* انیمیشن فاصله حروف را 2 ثانیه به تاخیر انداخت */

سازگاری بین مرورگرها را فراموش نکنید - کاملاً تمام ویژگی های خانواده انتقالنیاز به استفاده از پیشوندهای فروشنده:

Webkit-transition-Delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; انتقال-تاخیر: 1 ثانیه;

استفاده عملی

در عمل، ویژگی transition-delay اغلب هنگام ایجاد منوهای کشویی که با نگه داشتن نشانگر روی آن باز می شوند، استفاده می شود. در این مورد، نه تنها برای حالت اولیه، بلکه برای حالت نهایی نیز نوشته شده است.

ممکن است متوجه شده باشید که در برخی از سایت ها، زیر منوهای کشویی خیلی سریع ناپدید می شوند و پیدا کردن لینک مناسب و کلیک کردن روی آن دشوار می شود. ویژگی transition-delay که برای یک عنصر معمولی و برای عنصری با شبه کلاس:hover تنظیم شده است، به جلوگیری از این رفتار کمک می کند. مقادیر متفاوت خواهند بود: برای حالت عادی، ویژگی transition-delay باید بزرگتر از صفر باشد و برای حالت شناور باید 0 باشد. مثال:

منوی فرعی ( کدورت: 0؛ ویژگی انتقال: همه؛ مدت زمان انتقال: 0.5 ثانیه؛ انتقال-تاخیر: 1 ثانیه؛ )

این کد باعث می شود که منو بدون تاخیر در حالت شناور ظاهر شود و یک ثانیه ناپدید شود. این ترفند قطعا استفاده از منو را راحت تر می کند.

ویژگی animation-delay مقدار زمان انتظار قبل از شروع حلقه انیمیشن را تعیین می کند. مقدار 0 یا 0 میلی ثانیه انیمیشن را بلافاصله شروع می کند. یک مقدار منفی نیز انیمیشن را بدون تأخیر فعال می کند، اما ممکن است باعث شود که انیمیشن شروع به متفاوت نشان دهد.

مجاز است چندین مقدار را مشخص کنید و آنها را با کاما از هم جدا کنید.

اطلاعات مختصر

نحو

انیمیشن-تاخیر:<время> [,<время>]*

تعیین ها

	شرح	مثال
<тип>	نوع مقدار را نشان می دهد.	<размер>
A & B	مقادیر باید به ترتیب مشخص شده خروجی شوند.	<размер> && <цвет>
A | ب	نشان می دهد که شما باید فقط یک مقدار از مقادیر پیشنهادی (A یا B) انتخاب کنید.	عادی | کلاه های کوچک
الف || ب	هر مقدار را می توان به طور مستقل یا همراه با دیگران به هر ترتیبی استفاده کرد.	عرض || شمردن
	مقادیر گروه ها	[ محصول || صلیب ]
*	صفر یا چند بار تکرار کنید.	[,<время>]*
+	یک یا چند بار تکرار کنید.	<число>+
?	نوع، کلمه یا گروه مشخص شده اختیاری است.	درونی؟
(الف، ب)	حداقل A را تکرار کنید، اما نه بیشتر از B بار.	<радиус>{1,4}
#	یک یا چند بار با کاما از هم جدا شده اند.	<время>#

مثال

شما در نظر نگرفتید که میدان اسکالر لازم و کافی است!

مدل شی

یک شی.style.animationDelay

توجه داشته باشید

کروم، سافاری و اندروید از ویژگی -webkit-animation-delay پشتیبانی می کنند.

Opera تا نسخه 12.10 از ویژگی -o-animation-delay پشتیبانی می کند.

فایرفاکس تا نسخه 16 از ویژگی -moz-animation-delay پشتیبانی می کند.

مشخصات

هر مشخصات از چندین مرحله تایید می گذرد.

• توصیه - مشخصات توسط W3C تایید شده است و به عنوان یک استاندارد توصیه می شود.
• توصیه نامزد ( توصیه احتمالی) - گروه مسئول استاندارد از رسیدن به اهداف خود راضی است، اما برای اجرای استاندارد از جامعه توسعه کمک می خواهد.
• توصیه پیشنهادی توصیه پیشنهادی) - در این مرحله سند برای تایید نهایی به شورای مشورتی W3C ارائه می شود.
• پیش نویس کاری - نسخه بالغ تر یک پیش نویس که برای بررسی جامعه مورد بحث و اصلاح قرار گرفته است.
• پیش نویس سردبیر ( پیش نویس سرمقاله) - نسخه پیش نویس استاندارد پس از ایجاد تغییرات توسط ویراستاران پروژه.
• پیش نویس ( پیش نویس مشخصات) - اولین نسخه پیش نویس استاندارد.

مرورگرها

مرورگرها

نمادهای زیر در جدول مرورگر استفاده می شود.

مقدار اولیه	0s
اعمال می شود	همه عناصر، ::قبل و ::پس از شبه عناصر
به ارث برده	نه
رسانه ها	دیداری
مقدار محاسبه شده	همانطور که مشخص شده است
نوع انیمیشن	گسسته
نظم متعارف	نظم غیر مبهم منحصر به فرد تعریف شده توسط دستور زبان رسمی

سازگاری با مرورگر

جدول سازگاری در این صفحه از داده های ساخت یافته تولید می شود. اگر می‌خواهید در داده‌ها مشارکت کنید، لطفاً https://github.com/mdn/browser-compat-data را بررسی کنید و یک درخواست برای ما ارسال کنید.

داده های سازگاری را در GitHub به روز کنید

	دسکتاپ						سیار
	کروم	حاشیه، غیرمتمرکز	فایرفاکس	اینترنت اکسپلورر	اپرا	سافاری	نمای وب اندروید	کروم برای اندروید	فایرفاکس برای آندروید	اپرا برای اندروید	سافاری در iOS	اینترنت سامسونگ
انیمیشن-تاخیر	پشتیبانی کامل کروم 43 پشتیبانی کامل 43 پشتیبانی کامل 3 پیشوند پیشوند	پشتیبانی کامل Edge 12	پشتیبانی کامل فایرفاکس 16 یادداشت پشتیبانی کامل 16 یادداشت یادداشت قبل از فایرفاکس 57، فایرفاکس عناصر خارج از ویوپورت را که با تاخیر در ویوپورت متحرک شده اند، دوباره رنگ آمیزی نمی کند. این باگ تنها بر برخی پلتفرم ها مانند ویندوز تأثیر می گذارد. پشتیبانی کامل 49 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit- پشتیبانی کامل 44 پیشوند معلول پیشوند با پیشوند فروشنده اجرا شد: -webkit- Disabled از نسخه 44: این ویژگی پشت اولویت layout.css.prefixes.webkit قرار دارد (باید روی true تنظیم شود). برای تغییر تنظیمات برگزیده در فایرفاکس، از about:config دیدن کنید. پشتیبانی کامل 5 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -moz-	پشتیبانی کامل IE 10	پشتیبانی کامل اپرا 30 پشتیبانی کامل 30 پشتیبانی کامل 15 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit- بدون پشتیبانی 12.1 - 15 بدون پشتیبانی 12 - 15 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -o-	پشتیبانی کامل سافاری 9 پشتیبانی کامل 9 پشتیبانی کامل 4 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit-	WebView Android پشتیبانی کامل 43 پشتیبانی کامل 43 پشتیبانی کامل ≤37 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit-	Chrome Android پشتیبانی کامل 43 پشتیبانی کامل 43 پشتیبانی کامل 18 پیشوند پیشوند پیاده سازی شده با پیشوند فروشنده: -webkit-	فایرفاکس اندروید پشتیبانی کامل 16 پشتیبانی کامل 16 پشتیبانی کامل 49

تأخیر انیمیشن CSS در تکرار (5)

در اینجا یک قطعه کوچک وجود دارد که 75٪ موارد یکسان را نشان می دهد، سپس اسلاید می شود. این الگوی تکرار شونده تأخیر را به خوبی تقلید می کند:

اسلاید @-webkit-keyframes ( 0% (موقعیت پس‌زمینه: 0 0;) 25% (موقعیت پس‌زمینه: 0 0;) 50% (موقعیت پس‌زمینه: 0 0;) 75% (موقعیت پس‌زمینه: 0 0; ) 100% (موقعیت پس‌زمینه: 13em 0;) ) اسلاید @-moz-keyframes ( 0% (موقعیت پس‌زمینه: 0 0;) 25% (موقعیت پس‌زمینه: 0 0;) 50% (موقعیت پس‌زمینه: 0 0;) 75% (موقعیت پس‌زمینه: 0 0;) 100% (موقعیت پس‌زمینه: 13em 0;) ) اسلاید @keyframes ( 0% (موقعیت پس‌زمینه: 0 0;) 25% (موقعیت پس‌زمینه: 0 0 ;) 50% (موقعیت پس‌زمینه: 0 0;) 75% (موقعیت پس‌زمینه: 0 0؛) 100% (موقعیت پس‌زمینه: 13em 0;))

من اخیراً کشف کردم که چگونه از انیمیشن های CSS "به درستی" استفاده کنم (من قبلاً آنها را رد کرده بودم زیرا قادر به ایجاد دنباله های پیچیده مانند شما در جاوا اسکریپت نیستند). بنابراین اکنون در مورد آنها یاد می‌گیرم.

برای این افکت، سعی می‌کنم یک "فلش" گرادیان، عنصر پیشرفت مانند را پوشش دهد. مشابه تاثیر روی نوارهای پیشرفت بومی ویندوز ویستا/7.

@keyframes barshine (از (پس‌زمینه-تصویر:خطی-gradient(120deg,rgba(255,255,255,0) -10%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0%)) تا ( پس زمینه -تصویر:خطی-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%, rgba(255,255,255,0) 110%);) . ;)

همانطور که می بینید، من سعی می کنم یک تاخیر 4 ثانیه ای و سپس یک فلاش 1 ثانیه ای را تکرار کنم.

با این حال، به نظر می رسد که تاخیر انیمیشن فقط برای اولین تکرار اعمال می شود، پس از آن زرق و برق فقط به حرکت در اطراف ادامه می دهد.

من این مشکل را به صورت زیر "حل" کردم:

@keyframes expbarshine (از (پس‌زمینه-تصویر:خطی-gradient(120deg,rgba(255,255,255,0) -10%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0%))؛ ( پس‌زمینه-تصویر: خطی-gradient(120 درجه، rgba(255,255,255,0) -10%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0%)؛) تا (تصویر پس‌زمینه:خطی- گرادیان (120deg,rgba(255,255,255,0) 100%, rgba(255,255,255,0.25) 105%, rgba(255,255,255,0) 110%)؛) .progbar ( انیمیشن: barshine infinite ;

از و 80٪ دقیقاً یکسان هستند، که منجر به "تأخیر" 80٪ از طول انیمیشن می شود.

این کار می کند، اما برای انیمیشن بعدی من نیاز دارم که تأخیر متغیر باشد (برای یک عنصر خاص ثابت باشد، اما بین عناصری که از انیمیشن استفاده می کنند متغیر باشد) در حالی که خود انیمیشن به همان اندازه باقی می ماند.

با "راه حل" بالا، زمانی که تنها چیزی که می خواهم تاخیر بیشتر است، انیمیشن کندتری دریافت می کنم.

آیا امکان دارد که انیمیشن-تاخیر برای همه تکرارها اعمال شود، نه فقط برای اولین؟

minitech درست است که animation-delay تاخیر قبل از شروع انیمیشن را مشخص می کند و نهتاخیر بین تکرارها ویرایشگر پیش نویس مشخصات این را به خوبی توضیح می دهد، و در اینجا بحثی در مورد این ویژگی که شما توضیح می دهید وجود داشت که این ویژگی تاخیر تکرار را ارائه می دهد.

در حالی که ممکن است راه حلی در JS وجود داشته باشد، می توانید این تاخیر تکرار را جعل کنید تا نوار پیشرفت فقط با استفاده از CSS فلش شود.

با اعلان موقعیت قرارگیری مشعل: مطلق و سرریز کردن قسمت اصلی: پنهان، تنظیم حالت 100 درصدی فریم کلیدی بزرگتر از عرض نوار پیشرفت، و بازی با تابع زمان‌بندی مکعبی و مقادیر افست سمت چپ، می‌توانید یک نور را شبیه‌سازی کنید. حالت سهولت - در خروجی یا زمان خطی با "تاخیر".

نوشتن یک mixin کوچکتر/scss برای محاسبه دقیق شیفت چپ و تابع زمان برای به دست آوردن این دقیقاً جالب خواهد بود، اما من در حال حاضر وقت ندارم با آن بازی کنم. من دوست دارم چنین چیزی را ببینم!

در اینجا یک نسخه ی نمایشی است که من برای نشان دادن این موضوع آماده کرده ام. (من سعی کردم نوار پیشرفت ویندوز 7 را شبیه سازی کنم و کمی سقوط کردم، اما نشان می دهد که در مورد چه چیزی صحبت می کنم)

/* CSS */ @keyframes پیشرفت ( از ( عرض: 0px; ) به ( عرض: 600px; ) ) @keyframes barshine ( 0% ( سمت چپ: -100px; ) 100% ( سمت چپ: 1000px; ) ) .flare ( انیمیشن -نام: barshine؛ انیمیشن-مدت: 3 ثانیه؛ انیمیشن-جهت: عادی؛ انیمیشن-پر-حالت: رو به جلو؛ انیمیشن-زمان-عملکرد: cubic-bezier(.14, 0.75, 0.2, 1.01)؛ انیمیشن-تکرار -count: بی نهایت؛ سمت چپ: 0؛ بالا: 0؛ ارتفاع: 40 پیکسل؛ عرض: 100 پیکسل؛ موقعیت: مطلق؛ پس‌زمینه: -moz-radial-gradient(مرکز، پوشش بیضی، rgba(255,255,255,0.69) 0%, rgba( 255,255,255,0) 87%)؛ /* FF3.6+ */ پس‌زمینه: -webkit-gradient (شعاعی، مرکز مرکزی، 0px، مرکز مرکزی، 100٪، توقف رنگ (0%, rgba(255,255,255,0.69) , color-stop(87%,rgba(255,255,255,0)))؛ /* Chrome,Safari4+ */ پس زمینه: -webkit-radial-gradient(center, elipse cover, rgba(255,255,255,0.69) 0%, rgba(2525,25) ,0) 87%)؛ /* Chrome10+,Safari5.1+ */ پس‌زمینه: -o-radial-gradient(مرکز، پوشش بیضی، rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%)؛ /* Opera 12+ */ پس‌زمینه: -ms-radial-gradient(مرکز، پوشش بیضی، rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%)؛ /* IE10+ */ پس زمینه: گرادیان شعاعی(بیضی در مرکز، rgba(255,255,255,0.69) 0%, rgba(255,255,255,0) 87%)؛ /* W3C */ فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b0ffffff", endColorstr="#00ffffff",GradientType=1); /* بازگشتی IE6-9 روی گرادیان افقی */ z-index: 10; ) .progress ( انیمیشن-نام: پیشرفت؛ انیمیشن-مدت: 10 ثانیه؛ انیمیشن-تاخیر: 1 ثانیه؛ انیمیشن-زمان-تابع: خطی؛ انیمیشن-تکرار-تعداد: بی نهایت؛ سرریز: پنهان؛ موقعیت: نسبی؛ شاخص z: 1؛ ارتفاع: 100%؛ عرض: 100%؛ حاشیه سمت راست: 1px جامد #0f9116؛ پس‌زمینه: #caf7ce؛ /* مرورگرهای قدیمی */ پس‌زمینه: -moz-linear-gradient(top, #caf7ce 0%, #caf7ce 18%, #3fe81e 45%, #2ab22a 96%)؛ /* FF3.6+ */ پس‌زمینه: -webkit-gradient (خطی، بالا سمت چپ، پایین سمت چپ، توقف رنگ (0%,#caf7ce)، رنگ- stop(18%,#caf7ce)، color-stop(45%,#3fe81e)، color-stop(96%,#2ab22a))؛ /* Chrome,Safari4+ */ پس زمینه: -webkit-linear-gradient(بالا، #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%)؛ /* Chrome10+,Safari5.1+ */ پس‌زمینه: -o-linear-gradient(بالا، #caf7ce 0%,#caf7ce 18 %,#3fe81e 45%,#2ab22a 96%)؛ /* Opera 11.10+ */ پس‌زمینه: -ms-linear-gradient(بالا، #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96% /* IE10+ */ پس‌زمینه: گرادیان خطی (به پایین، #caf7ce 0%,#caf7ce 18%,#3fe81e 45%,#2ab22a 96%)؛ /* W3C */ فیلتر: progid:DXImageTransform. Microsoft.gradient(startColorstr="#caf7ce", endColorstr="#2ab22a",GradientType=0); /* IE6-9 */ .progress:after ( محتوا: ""؛ عرض: 100%؛ ارتفاع: 29 پیکسل؛ سمت راست: 0؛ پایین: 0؛ موقعیت: مطلق؛ z-index: 3؛ پس‌زمینه: -moz- خطی گرادیان(چپ، rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%)؛ /* FF3.6+ */ پس زمینه: -webkit-gradient (خطی، بالا سمت چپ، بالا سمت راست، color-stop(0%,rgba(202,247,206,0)), color-stop(100%,rgba(42,178,42,1)))؛ /* Chrome,Safari4+ */ پس زمینه: -webkit-linear-gradient(سمت چپ , rgba(202,247,206,0) 0%, rgba(42,178,42,1) 100%)؛ /* Chrome10+,Safari5.1+ */ پس‌زمینه: -o-linear-gradient(سمت چپ, rgba(202,247,206,0) 0 ٪ درصد gradient(startColorstr="#00caf7ce", endColorstr="#2ab22a",GradientType=1); /* IE6-9 */ .bar ( margin-top: 30px; height: 40px; width: 600px; position: نسبی) ; حاشیه: 1px جامد #777; مرز-شعاع: 3px; )

من مشکل مشابهی داشتم و استفاده کردم

@-webkit-keyframes pan ( 0%, 10% ( -webkit-transform: translate3d(0%, 0px, 0px); ) 90%, 100% ( -webkit-transform: translate3d(-50%, 0px, 0px) ;))

کمی آزاردهنده این است که شما باید مدت زمان خود را جعل کنید تا "تاخیر" را در هر دو طرف حساب کنید.

این کاری است که باید انجام دهید. باید طوری کار کند که یک انیمیشن ۱ ثانیه ای و سپس ۴ ثانیه ای تاخیر بین تکرارها داشته باشید:

@keyframes barshine ( 0% ( پس‌زمینه-تصویر:خطی-gradient(120 درجه، rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0% (2) پس‌زمینه-تصویر: خطی-gradient(120 درجه، rgba(255،255،255،0) 10%, rgba(255،255،255،0.25) 105%, rgba(255،255،255،0) 110%)؛ . )

بنابراین من خیلی با این کار اشتباه کرده ام و شما می توانید بدون اینکه خیلی هک شوید این کار را انجام دهید. این ساده ترین راه برای تعیین تاخیر بین تکرارهای انیمیشن است: 1. SUPER EASY و 2. فقط به کمی منطق نیاز دارد. این انیمیشن رقصی که من ساختم را ببینید:

Dance( انیمیشن-نام: رقص؛ -webkit-animation-name: dance؛ انیمیشن-تکرار-تعداد: بی نهایت؛ -webkit-animation-itation-count: بی نهایت؛ انیمیشن-مدت زمان: 2.5 ثانیه؛ -webkit-animation-duration: 2.5 ثانیه؛ -webkit-animation-delay: 2.5s؛ animation-delay: 2.5s؛ animation-timing-function: ease-in؛ -webkit-animation-timing-function: ease-in؛ ) @keyframes dance (0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg)؛ -o-transform: rotate(0deg)؛ -ms-transform: rotate(0deg); transform: rotate(0deg)؛ ) 25 % ( -webkit-transform: rotate(-120deg); -moz-transform: rotate(-120deg); -o-transform: rotate(-120deg); -ms-transform: rotate(-120deg); transform: rotate( -120 درجه؛ ) 50% (-webkit-transform: rotate (20 deg)؛ -moz-transform: rotate (20 deg)؛ -o-transform: rotate (20 deg)؛ -ms-transform: rotate (20 deg)؛ تبدیل: چرخش (20 درجه)؛ 100% (-webkit-transform: rotate(0deg)؛ -moz-transform: rotate(0deg)؛ -o-transform: rotate(0deg); -ms-transform: rotate(0deg)؛ تبدیل : چرخش (0 درجه)؛ ) ) @-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg)؛ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg تبدیل: چرخش (0 درجه)؛ 20% (-webkit-transform: rotate(20deg)؛ -moz-transform: rotate(20deg)؛ -o-transform: rotate(20deg)؛ -ms-transform: rotate( 20 درجه؛ تبدیل: چرخش (20 درجه)؛ 40% (-webkit-transform: rotate(-120deg)؛ -moz-transform: rotate(-120deg)؛ -o-transform: rotate(-120deg)؛ -ms- تبدیل: چرخش (-120 درجه)؛ تبدیل: چرخش (-120 درجه)؛ 60% (-webkit-transform: rotate(0deg)؛ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) 80% (-webkit-transform: rotate(-120deg)؛ -moz-transform: rotate(-120deg)؛ -o-transform: rotate( -120 درجه؛ -ms-transform: rotate(-120deg)؛ تبدیل: rotate(-120deg); ) 95% (-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg)؛ -o- transform: rotate(20deg)؛ -ms-transform: rotate(20deg); transform: rotate(20deg); ))

من در واقع به اینجا آمدم تا بفهمم چگونه می توان یک انیمیشن را به تأخیر انداخت، وقتی فهمیدم که شما فقط 1. مدت زمان انیمیشن را افزایش دهید و نسبت زمان را برای هر انیمیشن شماره گیری کنید. قبل از من هر کدام 0.5 ثانیه و در مجموع 2.5 ثانیه طول می کشند. حالا اجازه بدهید بگویم که من می خواستم یک تاخیر معادل کل مدت زمان اضافه کنم، بنابراین تاخیر 2.5 ثانیه است.

زمان انیمیشن 2.5 ثانیه و تاخیر 2.5 است، بنابراین مدت زمان را به 5 ثانیه تغییر دهید. با این حال، از آنجایی که کل مدت زمان را دو برابر کرده اید، باید قسمت انیمیشن را نصف کنید. آخرین مورد را در زیر بررسی کنید. این برای من عالی کار کرد.

@-webkit-keyframes dance ( 0% ( -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); تبدیل: چرخش (0 درجه)؛ 10٪ ( -webkit-transform: rotate (20 deg)؛ -moz-transform: rotate (20 deg)؛ -o-transform: rotate (20 deg)؛ -ms-transform: rotate (20 deg) ؛ تبدیل: چرخش (20 درجه)؛ 20% (-webkit-transform: rotate(-120deg)؛ -moz-transform: rotate(-120deg)؛ -o-transform: rotate(-120deg)؛ -ms-transform: rotate(-120deg); transform: rotate(-120deg); ) 30% (-webkit-transform: rotate(0deg)؛ -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms -تبدیل: چرخش (0 درجه)؛ تبدیل: چرخش (0 درجه؛ ) 40% ( -webkit-transform: rotate(-120deg)؛ -moz-transform: rotate(-120deg)؛ -o-transform: چرخش (-120 درجه) -ms-transform: rotate(-120deg)؛ تبدیل: rotate(-120deg)؛ ) 50% (-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg)؛ -o-transform: rotate(0deg)؛ -ms-transform: rotate(0deg); transform: rotate(0deg); ))

اینها محاسبات شما هستند که احتمالاً برای تعیین نحوه تغییر مدت زمان انیمیشن و درصد هر قسمت از آنها استفاده می کنید.

آرزو_مدت = x

wish_duration = animation_part_duration1 + animation_part_duration2 + ... (و غیره)

مدت زمان کل = x + y

animation_part_duration1_actual = animation_part_duration1 * wish_duration / total_duration

یک پوستری روی دیوار درست کردم که با فاصله به چپ و راست حرکت می کند. برای من این کار می کند:

Div-animation ( -webkit-animation: bounce 2000ms ease-out; -moz-animation: bounce 2000ms ease-out; -o-animation: bounce 2000ms ease-out; انیمیشن: bounce 2000ms ease-out infinite-animb تاخیر: 2 ثانیه؛ /* Chrome، Safari، Opera */ انیمیشن-تاخیر: 2 ثانیه؛ مبدا تبدیل: 55% 10%؛ ) @-webkit-keyframes bounce ( 0% (transform: rotate(0deg); ) 3% ( تبدیل: چرخش (1 درجه)؛ 6% ( تبدیل: چرخش (2 درجه)؛ ) 9% ( تبدیل: چرخش (3 درجه)؛ ) 12% ( تبدیل: چرخش (2 درجه)؛ ) 15% ( تبدیل: چرخش (1 درجه) ) ) ) ) 18% ( تبدیل: چرخش (0 درجه)؛ ) 21% ( تبدیل: چرخش (-1 درجه)؛ ) 24% ( تبدیل: چرخش (-2 درجه)؛ ) 27% ( تبدیل: چرخش (-3 درجه). ) 30٪ ( تبدیل: چرخش (-2 درجه)؛ ) 33٪ ( تبدیل: چرخش (-1 درجه)؛ ) 36٪ ( تبدیل: چرخش (0 درجه؛ ) 100٪ ( تبدیل: چرخش (0 درجه)؛ ) )