CSS অ্যানিমেশন আমাদের লুকানো এলিমেন্ট প্রদর্শন করতে দেয়।
নিচের উদাহরণটি দেখাবে কিভাবে আমরা CSS অ্যানিমেশন ব্যবহার করে এলিমেন্ট প্রকাশ করতে পারি।
উদাহরণ
<!DOCTYPE html> <html> <style> .item { position: relative; perspective: 1000px; } .demo, .hidden-one { background: lightgreen; box-shadow: 0 5px 12px rgba(0,0,0,0.6); } .item:hover .hidden-one{ animation: yoyo 1.4s backwards ease; } .item:hover .demo { animation-name: yo 1s ease; } .demo { position: absolute; height: 150px; width: 150px; background-color: firebrick; border-radius: 50%; left: 100px; top: 50px; z-index: 2; } .hidden-one { background-color: #880; border-radius: 3px; height: 120px; width: 55px; position: absolute; left: 280px; top: 140px; opacity: 0; transition: opacity 0.8s; } @keyframes yoyo { 0% { top: 140px; opacity: 0; left: 70px; z-index: 1; } 50% { left: 12px; opacity: 1; z-index: 2; top: 140px; } 100% { opacity: 1; left: 150px; z-index: 3; } } @keyframes yo { 0% { } 30% { transform: rotate3D(-1,1,0.1,10deg) scale(1.05); } 50% { transform: rotate3D(1,-1,0.1,10deg) scale(1.05); } 100% { } } </style> <body> <div class="item"> <div class="hidden-one"></div> <div class="demo"></div> </div> </body> </html>
আউটপুট
এটি নিচের ফলাফল দেবে −
