Swapping state with Css Keyframes

Swapping state with Css Keyframes

Bạn muốn một element có một trạng thái trong 9 giây, và một trạng thái khác trong 1 giây trên một vòng lặp.

Bạn có thể sử dụng những khoảng cách ngắn giữa các keyframes để chuyển từ một trạng thái sang 1 trạng thái khác như 59,999% đến 60%.

<div></div>

div {
 width: 300px;
 height: 300px;
 background: orangered;
 animation: color 10s infinite both;
}

@keyframes color {
 59.999% {
   background: orangered;
 }
 60% {
   background: teal;
 }
 69.999% {
   background: teal;
 }
 70% {
   background: orangered;
 }
}

Bạn cũng có thể không cần phải sử dụng .999, thay vào đó bạn có thể sử dụng những bước như sau

div {
	animation: color 10s steps(10) infinite both;
}

Single keyframe/Single step changer

Ví dụ một state trong 9s và state khác 1s 1-1-1-1-1-1-1-1-1-2 bạn có thể viết

div {
	…
	background: orangered;
	animation: color 10s steps(1) infinitite both.
}
@keyframes color {

	90% {
		background: teal;
    }
}

Thẻ div này sẽ chỉ có màu teal trong 1 giây, sau đó lại chuyển về màu orangered. Thay keyframe đến 70% như sau 1-1-1-1-1-1-1-2-2-2

Sang 10% như sau

1-2-2-2-2-2-2-2-2-2

div {
  width: 300px;
  height: 300px;
  background: orangered;
  animation: color 10s steps(1) infinite both;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Chuyển state và đứng im.

Chúng ta có cách để thay đổi state của element từ vô hạn sang hữu hạn.

Ví dụ bạn chỉ muốn thay đổi state 1 lần. Bạn có thể làm như sau:

div {
  ...
  background: orangered;
  animation: color 10s steps(1) forwards;
}

@keyframes color {
  90% {
    background: teal;
  }
}

Như vậy là đã xong việc thay đổi state vô hạn.

Vậy. Nâng cao một chút. Làm thế nào để thay đổi state theo tương tác của người dùng. Đây là một ví dụ về việc click vào một nút menu. Sử dụng một :target state.

<a class="toggle" href="#menu">
  ☰
</a>

<nav id="menu">
  <ul>
    <li>Three</li>
    <li>Little</li>
    <li>Pigs</li>
  </ul>
  <a href="#0">ⓧ</a>
</nav>

Css

@keyframes stateChanger {
  50% {
    visibility: visible;
    opacity: 1;
  }
}

nav {
  opacity: 0;
  visibility: hidden;
  animation: stateChanger 200000s steps(1) forwards;

  background: #222;
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem 3rem;
}
nav:target {
  animation-delay: -100000s;
}
nav a {
  color: white;
  text-decoration: none;
  position: absolute;
  top: 4px;
  right: 4px;
}

.toggle {
  font-size: 25px;
  text-decoration: none;
}
nav ul {
  list-style: none;
  padding: 1.5rem 0 0 0;
  margin: 0;
}
nav ul li {
  text-align: center;
  padding: 0.25rem 1rem;
}

Đây là các tips nhỏ mà mình muốn chia sẽ. Cảm ơn mọi người đã đọc.