الرسوم المتحركة CSS وماذا تفعل التوقيتات

Question

.fromRight.box{
    -webkit-animation: fromRightbox 0.6s ease-in 0.8s both;
    -moz-animation: fromRightbox 0.6s ease-in 0.8s both;
    -o-animation: fromRightbox 0.6s ease-in 0.8s both;
    -ms-animation: fromRightbox 0.6s ease-in 0.8s both;
    animation: fromRightbox 0.6s ease-in 0.8s both;
}

@-webkit-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-moz-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-ms-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}
@-o-keyframes fromRightbox {
    0%{ left: 110%; opacity: 1; }
    100%{ left: 25%; opacity: 1; }
}

كنت أتساءل عما إذا كان شخص ما يمكن أن يفسر animation: fromRightbox 0.6s ease-in 0.8s both; خطوط لي لأنني أحاول أن أفهم ما 0.6s ease-in يعني وماذا بالضبط 0.8 both يعني أيضا.

شكرًا

Answer 1

0.6s = مدة الرسوم المتحركة تحدد الخاصية Animation-duration في CSS المدة الزمنية التي يجب أن تستغرقها الرسوم المتحركة لإكمال دورة واحدة.

ease-in = وظيفة توقيت الرسوم المتحركة تحدد خاصية توقيت الرسوم المتحركة في CSS كيفية تقدم الرسوم المتحركة في CSS خلال مدة كل دورة.

both = وضع تعبئة الرسوم المتحركة تحدد الخاصية Animation-fill-mode CSS كيفية تطبيق الرسوم المتحركة CSS للأنماط على هدفها قبل وبعد تنفيذه.

تأخير الرسوم المتحركة تحدد خاصية تأخير الرسوم المتحركة في CSS متى يجب أن تبدأ الرسوم المتحركة.يتيح ذلك لتسلسل الرسوم المتحركة أن يبدأ بعد مرور بعض الوقت على تطبيقه على عنصر ما.

ستساعدك هذه الموارد على معرفة المزيد

http://dev.w3.org/csswg/css-animations/
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay