আশা করি সবাই ভালই আছেন। আমার আজকের আর্টিকেলও সিএসএস নিয়ে। আজকে লিখব সিএসএস এনিমেশন। কোন টেক্সটে কিভাবে এনিমেশন দেওয়া যায় তাই দেখাব আজকে। কিছু শব্দ পর্যায়ক্রমে পরিবর্তন হবে। এবং এভাবে হতে থাকবে চক্রা-কারে। সিএসএস এনিমেশন ব্যবহার করে কাজটি কিভাবে করেছি তার বর্ননা নিচে দেখুন।
তো চলুন কোডগুলো দেখে নিই-

এইচটিএমএল কোড-

<section>
<h2>
<span>Real poetry is like</span>
<span>creating</span>
<div>
<span>breathtaking moments</span>
<span>lovely sounds</span>
<span>incredible magic</span>
<span>unseen experiences</span>
<span>happy feelings</span>
<span>beautiful butterflies</span>
</div>
<br />
<span>with a silent touch of</span>
<div>
<span>sugar</span>
<span>spice</span>
<span>colors</span>
<span>happiness</span>
<span>wonder</span>
<span>happiness</span>
</div>
</h2>
</section>

সিএসএস কোড-
মেইন wrapper এর জন্য কোড-

.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}

টেক্সট এর বিভিন্ন ইফেক্টের জন্য কোড-

.rw-sentence{
margin: 0;
text-align: left;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.rw-sentence span{
color: #444;
white-space: nowrap;
font-size: 200%;
font-weight: normal;
}

.rw-words{
display: inline;
text-indent: 10px;
}

.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;}

এখন এনিমেশনের কোড লিখব-

.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}

এনিমেশন শব্দটি প্রতি ৩ সেকেন্ড পর পর পরিবর্তন হবে। এভাবে ৬টি শব্দ ১৮ সেকেন্ডে পরিবর্তন হলে পূর্বের শব্দ আসবে চক্রা-কারে।

শব্দগুলোকে বিবর্ণ করে দিব এবং এদের হাইট ও এনিমেট করব।এর জন্য নিচের কোড লিখতে হবে-

@keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}

একই ভাবে width কেও এনিমেট করব।এর জন্য নিচের কোড লিখতে হবে-

@keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}

নিচে ডেমো দেখে নিতে পারেন- ডেমো

সোর্স কোড- সোর্স কোড
আজ এই পর্যন্ত। সবাই ভালো থাকুন।
আল্লাহ হাফেয।
পোস্ট লিখেছেন-ডোমেইন হোস্টিং সেবাদান কারী প্রতিষ্ঠান টিউটোহোস্ট সাপোর্ট বিভাগের নিলুফার ইয়াসমিন।

একসাথে প্রকাশিত টিউটোরিয়ালবিডি ব্লগে