‹ ›

সিএসএস এনিমেশন (CSS Animation)

ওয়েব ডিজাইনের জন্য সিএসএস এনিমেশন অনেক গুরুত্বপূর্ণ একটি অধ্যায়। বিশেষ করে ই-কমার্স সাইটের কন্টেন্টগুলোতে সুন্দর সুন্দর কিছু ইফেক্ট দেওয়ার জন্য সিএসএস এনিমেশন খুবই জরুরী হয়ে পড়ে। যদি প্রশ্ন করেন, ওয়েব ডিজাইন কি! উত্তরে আমি বলব, ওয়েব ডিজাইন হচ্ছে একজন প্রফেশনাল ওয়েব ডিজাইনার একটি ওয়েব পেজের জন্য কালার কমিউনিকেশন থেকে লইয়া এনিমেশন পর্যন্ত যেখানে যেমন দেখতে সুন্দর দেখাবে, সেখানে সেটাই কার্যকর করাকে ওয়েব ডিজাইন বলে। কিছু কিছু বিশেষ বাটনে এনিমেশন দেওয়া যায়। অথবা পেজে যদি ইমেজ স্লাডার দিতে হয়, তাহলে এনিমেশনের মাধ্যমে স্লাইডারকে অনেক সুন্দর ভাবে উপাস্থাপন করা যায়। উদাহরণে আমি দু'টো বাটনে সিএসএস এনিমেশন ইফেক্ট দেখিয়েছি।
Sumaiya Cosmetics নামে আমার ছোট ভাইয়ের একটি কসমেটিক্স ষ্টোর রয়েছে। সেটাকে মডেল হিসেবে নিয়ে নিচে চার'টি কন্টেন্ট সাজিয়েছি। চার'টার জন্য চার রকমের হোভার ইফেক্ট দিয়েছি। যদিও এ ধরনের উদাহরণ এখানে প্রযোজ্য নয়, এর পরেও সিএসএস এনিমেশনের ব্যবহার সম্মন্ধে কিছুটা ধারনা দেওয়ার জন্য এমন উদাহরণ এখানে দেখালাম। প্রতিটি কন্টেন্টের উপর মাউস হোভার করে ইফেক্ট গুলো দেখে নিবেন। সর্বশেষ আমার দেখা সেরা ১০টি এনিমেশন কোড দিয়েছি। ক্লিক করে দেখে নিন। এবং আপনি চাইলে কোড এডিট করে পাশে ফলাফল দেখে নিতে পারেন। আর আপনি সিএসএস কিফ্রেমের কাজ জানলে এরকম হাজার রকমের ইফেক্ট দিতে পারেন। ভিডিও'টি অবশ্যই দেখবেন। ভিডিও'তে আমি দারুন একটা এনিমেশন দেখিয়েছি। আশা করি ভাল লাগবে।

বিস্তারিত ভিডিও সহ দেখুন


<!DOCTYPE html>
 <html>
 <head>
 <title>CSS Animation</title>
 <meta charset="UTF-8">
<style>
 .main{
height:400px;
width:400px;
margin:0px auto;
background:green;
background:linear-gradient(to bottom,yellow 0%,green 100%);
position:relative;
}
 .main .red-circle{
  height: 100px;
  width: 100px;
  position:absolute;
  left:38%;
  top:30px;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}
/*--sun--*/
.main .sun{
    width:100px;
    height:100px;
    animation: circle 5s linear infinite;
    transform-origin:50% 200px;
	position:absolute;
	left:38%;
}

.sun{
   animation: inner-circle 5s linear infinite;
}
@keyframes circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}

@keyframes inner-circle {
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}
</style>    
</head>
<body>
 <main class="main">
 <div class="red-circle"></div>
 <img class="sun" src="sunny.png">
</main>
</body>
</html>

ভিডিও দেখুন নিজে করুন

ফলাফল

CSS Hover Animation Effect

Bounce Top Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.bounce-top {
	-webkit-animation: bounce-top 0.9s both;
	 animation: bounce-top 0.9s both;
}

@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateY(-45px);
            transform: translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-24px);
            transform: translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateY(-12px);
            transform: translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateY(-6px);
            transform: translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="bounce-top">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Flicker Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.flicker{
	-webkit-animation: flicker-3 2.5s linear infinite both;
	 animation: flicker-3 2.5s linear infinite both;
}

@-webkit-keyframes flicker-3 {
  0%,
  100% {
    opacity: 1;
  }
  32.98% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  34.02% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.9% {
    opacity: 0;
  }
  35.92% {
    opacity: 1;
  }
  38.98% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  39.8% {
    opacity: 0;
  }
  39.82% {
    opacity: 1;
  }
  83.98% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  84.9% {
    opacity: 0;
  }
  84.92% {
    opacity: 1;
  }
}
@keyframes flicker-3 {
  0%,
  100% {
    opacity: 1;
  }
  32.98% {
    opacity: 1;
  }
  33% {
    opacity: 0;
  }
  34% {
    opacity: 0;
  }
  34.02% {
    opacity: 1;
  }
  34.98% {
    opacity: 1;
  }
  35% {
    opacity: 0;
  }
  35.9% {
    opacity: 0;
  }
  35.92% {
    opacity: 1;
  }
  38.98% {
    opacity: 1;
  }
  39% {
    opacity: 0;
  }
  39.8% {
    opacity: 0;
  }
  39.82% {
    opacity: 1;
  }
  83.98% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
  84.9% {
    opacity: 0;
  }
  84.92% {
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="flicker">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Jello Vertical Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.jello-vertical{
	-webkit-animation: jello-vertical 0.9s both;
	animation: jello-vertical 0.9s both;
}
@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="jello-vertical">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Rotate Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.rotate-me{
  -webkit-animation: rotate-center 0.6s ease-in-out both;
   animation: rotate-center 0.6s ease-in-out both;		
}

@-webkit-keyframes rotate-center{
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate-center{
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="rotate-me">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Rotate Scale Down Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.rotate-scale-down {
	-webkit-animation: rotate-scale-down 0.65s linear both;
	 animation: rotate-scale-down 0.65s linear both;
}

@-webkit-keyframes rotate-scale-down {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(0.5) rotateZ(180deg);
            transform: scale(0.5) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-down {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(0.5) rotateZ(180deg);
            transform: scale(0.5) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="rotate-scale-down">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Rotate Scale Up Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.rotate-scale-up {
	-webkit-animation: rotate-scale-up 0.65s linear both;
	 animation: rotate-scale-up 0.65s linear both;
}
@-webkit-keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}
@keyframes rotate-scale-up {
  0% {
    -webkit-transform: scale(1) rotateZ(0);
            transform: scale(1) rotateZ(0);
  }
  50% {
    -webkit-transform: scale(2) rotateZ(180deg);
            transform: scale(2) rotateZ(180deg);
  }
  100% {
    -webkit-transform: scale(1) rotateZ(360deg);
            transform: scale(1) rotateZ(360deg);
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="rotate-scale-up">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Scale In Center Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.scale-in-center {
	-webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) alternate backwards;
	 animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) alternate backwards;
}

@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="scale-in-center">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Slide In Top Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.slide-in-top {
	-webkit-animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-in-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="slide-in-top">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Tracking In Contract Top


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.tracking-in-contract-bck-top {
	-webkit-animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	 animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-contract-bck-top {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(-300px);
            transform: translateZ(400px) translateY(-300px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}
@keyframes tracking-in-contract-bck-top {
  0% {
    letter-spacing: 1em;
    -webkit-transform: translateZ(400px) translateY(-300px);
            transform: translateZ(400px) translateY(-300px);
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0);
            transform: translateZ(0) translateY(0);
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="tracking-in-contract-bck-top">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Tracking In Expand Animation


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="animation-examples.css">
<style>
.tracking-in-expand {
	-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	 animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

</style>
</head>
<body>
<div class="main">
<h1 class="tracking-in-expand">Markup School</h1>
<a title="Replay Animation" href=""><i class="fa fa-refresh"></i></a>
</div>
</body>
</html>

নিজে করে দেখুন

Keep Your Ads Here...

ওয়েব ডিজাইন

সিএসএস এনিমেশন (CSS Animation)

বিস্তারিত ভিডিও সহ দেখুন

কোড উদাহরণ

ফলাফল

CSS Hover Animation Effect

Bounce Top Animation

Flicker Animation

Jello Vertical Animation

Rotate Animation

Rotate Scale Down Animation

Rotate Scale Up Animation

Scale In Center Animation

Slide In Top Animation

Tracking In Contract Top

Tracking In Expand Animation

Keep Your Ads Here...

ঐতিহাসিক কালার থিওরি

এইচটিএমএল আইকন

ওয়েবের যত ফন্টস

সিএসএস এনিমেশন

হরেক রকম মেনু

রকমারি বাটন

কিভাবে...?

ওয়েব ডিজাইন

সিএসএস এনিমেশন (CSS Animation)

বিস্তারিত ভিডিও সহ দেখুন

কোড উদাহরণ

ফলাফল

CSS Hover Animation Effect

Bounce Top Animation

Flicker Animation

Jello Vertical Animation

Rotate Animation

Rotate Scale Down Animation

Rotate Scale Up Animation

Scale In Center Animation

Slide In Top Animation

Tracking In Contract Top

Tracking In Expand Animation

Keep Your Ads Here...

ঐতিহাসিক কালার থিওরি

এইচটিএমএল আইকন

ওয়েবের যত ফন্টস

সিএসএস এনিমেশন

হরেক রকম মেনু

রকমারি বাটন

সোশ্যাল মিডিয়াতে আমরা

কিভাবে...?