Hiển thị phần tử ẩn bằng CSS Animations

Giới thiệu

CSS animations cho phép chúng ta hiển thị các phần tử ẩn.

Ví dụ

Ví dụ sau cho thấy cách hiển thị phần tử bằng 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>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: