إنشاء حركة CSS

مثال محسوب للمدخلات والمخرجات

هذه نتائج المحرك الفعلي بالقيم التجريبية أدناه، دون مدخلاتك الشخصية أو عملك المحفوظ. حمّل المثال في الأداة لمراجعة المدخلات نفسها.

مدخل تجريبي

ظهور تدريجي

1

نتيجة المثال

@keyframes example {
  from { opacity: 0; }
  to { opacity: 1; }
}
.element { animation: example 1s ease both; }
@media (prefers-reduced-motion: reduce) {
  .element { animation: none; }
}