CSS3 কীফ্রেম অ্যানিমেশন তৈরি করার পদ্ধতি

CSS3-এ কীফ্রেম অ্যানিমেশন তৈরি করতে, পৃথক কীফ্রেম সংজ্ঞায়িত করুন। কীফ্রেমগুলি CSS3-এ মধ্যবর্তী অ্যানিমেশন ধাপগুলি নিয়ন্ত্রণ করে।

উদাহরণ

নিচের কোডটি CSS3 ব্যবহার করে কীফ্রেম অ্যানিমেশন তৈরি করার পদ্ধতি দেখায়:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: rgb(218, 78, 36);
    border: 4px solid rgb(0, 0, 0);
    position: relative;
    animation: circleMove 5s infinite;
}
@keyframes circleMove {
    from {
        left: 0px;
        border-radius: 0px;
    }
    to {
        left: 200px;
        border-radius: 50%;
    }
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>

আউটপুট

উপরোক্ত কোড নিচের আউটপুটটি তৈরি করবে:

কিছুক্ষণ পর বর্গটি বৃত্তে পরিণত হবে: