هل من الممكن تعيين مدة/تأخير مختلفة لخيارات التحويل؟

Question

أرغب في تعيين العديد من خيارات التحويل لكائن HTML الخاص بي ولكن بمدة مختلفة وتأخير.

إذا حاولت استخدام شيء كهذا:

-webkit-transition: -webkit-transform, opacity;
-webkit-transform: rotate(180deg) scale(2); 
-webkit-transition-duration: 2000ms, 6000ms; 
-webkit-transition-delay: 0ms, 6000ms;

ثم سيكون لدي وظيفة زمنية مختلفة للتحويل والتعتيم ، لكن هل يمكنني تعيين خيارات مختلفة للتدوير والحجم ، على سبيل المثال ، تدوير لمدة 10s ومقياس العشرينات؟

Answer 1

ربما ليس مباشرة ، ولكن يمكن تحقيق نفس التأثير عناصر التعشيش.

Answer 2

نعم يمكنك القيام بذلك مباشرة مع الرسوم المتحركة CSS3. إذا كان لديك تحويل عتامة من 0 إلى 1 يستمر 20 ثانية ، وتناوب 90 درجة يستمر 10 ثوانٍ ، فأنت تقوم بإنشاء إطار مفتاح في 10 ثوانٍ مع عتامة .5 وتناوب 90 درجة وإطار مفتاح آخر في 20 ثانية مع عتامة 1 والدوران 90 درجة. إنه نوع من الألم ، لكنه سيعمل. تعشيش ديس هو أنظف قليلا (كما يقول دوغ أعلاه)

حسنًا ، هذا هو الرمز:

@-webkit-keyframes foo {
 0% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0;
 }
 50% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    opacity: 0.5;
 }

 100% {
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(90deg);
    opacity: 1;
 }

وأنت تضع

-webkit-animation-duration: 20s;

في HTML الخاص بك.

Answer 3

ستكون هذه مشكلة للقيام بذلك كما قال دوغ إذا كان لديك منظور ثلاثي الأبعاد في الرسوم المتحركة الخاصة بك. ربما يمكنك استخدام "على غرار التحويل: Preserve-3D" ، لكنه لا يعمل في IE 10-11 ويعمل غريبًا في جميع المتصفحات الأخرى Exept Firefox. لذلك فإن الحل الوحيد الذي أعتقده هو استخدام الرسوم المتحركة CSS3. في حالتك سيكون:

@-webkit-keyframes rotate_scale {

    0% {
        -webkit-transform: rotate(0deg) scale(0);
     }
     50% {
        -webkit-transform: rotate(90deg) scale(0);
     }
     100% {
        -webkit-transform: rotate(180deg) scale(2);
     }
}
@keyframes rotate_scale {

    0% {
        transform: rotate(0deg) scale(0);
     }
     50% {
        transform: rotate(90deg) scale(0);
     }
     100% {
        transform: rotate(180deg) scale(2);
     }
}

حتى تتمكن من تعيين أطول مدة من التحويلات الخاصة بك. على سبيل المثال 20 ثانية للتناوب: animation-duration: 20s; animation-name: rotate_scale; -webkit-animation-duration: 20s; -webkit-animation-name: rotate_scale; ثم فقط احسب متى سيبدأ التحويل الآخر. في مقياس الامتحان يبدأ في عشر ثوان بعد الدوران. لذلك سيكون نصف الوقت الكامل (50 ٪). وسوف تستمر 10 ثوان حتى نهاية الوقت الكامل (100 ٪). ولكن إذا كنت ترغب في جعل مدة النطاق 5 ثوانٍ على سبيل المثال ، ستحتاج إلى إضافة إطار مفتاح جديد 75% { transform: rotate(135deg) scale(2); } واكتب هناك اثنين يتحول.