การเปิดเผยอิลิเมนต์ที่ซ่อนอยู่ด้วย CSS Animations

CSS Animations ช่วยให้เราแสดงอิลิเมนต์ที่ซ่อนอยู่ได้

ตัวอย่าง

<!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>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้: