مقدار اولیه	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 لازم نیست بلافاصله پس از شروع اولیه شروع شود. می توانید زمان شروع آن را با ویژگی transition-delay کنترل کنید. برای به تعویق انداختن انتقال برای یک زمان خاص، آن را در مقدار ویژگی مشخص کنید:

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

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

ویژگی انتقال: رنگ، رنگ پس‌زمینه، فاصله حروف. مدت زمان انتقال: 1 ثانیه، 0.5 ثانیه، 2 ثانیه تأخیر انتقال: 0 ثانیه، 0 ثانیه، 2 ثانیه /* تأخیر بین حروف متحرک 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 ارائه می شود.
• پیش نویس کاری - پیش نویس بالغ تر پس از بحث و اصلاحات برای بررسی جامعه.
• پیش نویس سردبیر ( پیش نویس سرمقاله) یک نسخه پیش نویس استاندارد پس از اعمال تغییرات توسط ویراستاران پروژه است.
• پیش نویس ( پیش نویس مشخصات) اولین نسخه پیش نویس استاندارد است.

مرورگرها

مرورگرها

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

تأخیر در تکرار انیمیشن 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 (از (background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0%)؛) به (زمینه) -image: خطی-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(120 درجه، rgba(255,255,255,0) -10%, rgba(255,255,255,0.25) -5%, rgba(255,255,255,0) 0% (8;) پس زمینه-تصویر: خطی- گرادیان (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 ;ar)

از و 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%)؛ /*O pera 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 4 5%,#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; posi موقعیت: نسبی; حاشیه: 1px جامد #777; شعاع حاشیه: 3 پیکسل )

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

@-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%)؛ ) .progbarite:0 ;)

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

Dance( انیمیشن-نام: رقص؛ -webkit-animation-name: dance؛ انیمیشن-تکرار-تعداد: بی نهایت؛ -webkit-انیمیشن-تکرار-تعداد: بی نهایت؛ انیمیشن-مدت: 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)؛ تبدیل: rotate(20deg)؛ 100% (-webkit-transform: rotate(0deg); -moz-transform: rotate(0deg)؛ -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); ) ) @-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); تبدیل: چرخش (20 درجه)؛ ))

من در واقع به اینجا آمدم تا بفهمم چگونه می توان یک انیمیشن را به تأخیر انداخت، وقتی فهمیدم که شما فقط 1. مدت زمان انیمیشن را افزایش دهید و نسبتی از زمان را برای هر انیمیشن به دست آورید. Beore من هر کدام را 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)؛ transfo rm: چرخش (0 درجه)؛ ))

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

آرزو_مدت = 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 درجه؛ ))