কম্পিউটার টিউটোরিয়াল

CSS দিয়ে অ্যানিমেশন প্রথমে পেছনে থেকে এগিয়ে আবার সামনে চলানো

অ্যানিমেশন প্রথমে পেছনে থেকে এগিয়ে আবার সামনে চলাতে animation-direction প্রোপার্টি alternate-reverse মান দিয়ে ব্যবহার করুন।

উদাহরণ

<!DOCTYPE html> <html>    <head>       <style>          div {             width: 150px;             height: 200px;             position: relative;             background-color: yellow;             animation-name: myanim;             animation-duration: 2s;             animation-direction: alternate-reverse;             animation-iteration-count: 3;          }          @keyframes myanim {             0% {background-color:green; left:0px; top:0px;}             50% {background-color:maroon; left:100px; top:100px;}             100% {background-color:gray; left:0px; top:0px;}          }       </style>    </head>    <body>       <div></div>    </body> </html>

  1. CSS দিয়ে ধীরে শুরু, দ্রুত মাঝপথ এবং ধীরে শেষ হওয়া অ্যানিমেশন

  2. CSS দিয়ে অ্যানিমেশন কতবার চলবে তা সেট করা

  3. CSS দিয়ে অ্যানিমেশন ডিলে করা

  4. CSS top প্রপার্টি অ্যানিমেশন সহ