كيفية إضافة مؤثرات لعنصر HTML بـــ CSS

السلام عليكم

الموضوع لا يستحق تعريف فهو باين من عنوانه. لذا سأدخل مباشرة في الجوهر.
سنقوم اليوم بإضافة مؤثر ( إن صح التعبير ) على جملة نصية داخل عنصر ( HTML p ) ، بجعله يتنقل من اليمين إلى اليسار.

كود الـ ( HTML )​

كود:

<p class="animate">
   أهلا بكم على موقع أكتب كود لعلوم الحاسوب
</p>

كود التنسيق ( CSS )​

كود:

p.animate{
  animation-duration: 7s;
  animation-name: slidein;
  /*animation-iteration-count: infinite;*/
}

@-webkit-keyframes slidein{
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
}
@keyframes slidein {
    from {
      margin-left: 100%;
      width: 300%;
    }
    to {
      margin-left: 0%;
      width: 100%;
    }
}

لمزيد التعرف على "[email protected]"

كود:

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

متابعة طيبة​