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> आउटपुट
यह निम्नलिखित परिणाम देगा -
