CSSを使ったアニメーション（CSS、Animation）

css_animation.md

スケルトン・ローディング

.skeleton {
  background-image: linear-gradient(
    90deg,
    #eee 0%, #eee 40%, #ddd 50%, #ddd 55%, #eee 65%, #eee 100%
  );
  background-size: 400%;
  animation: skeleton 1.5s infinite;
}

@keyframes skeleton {
  from { background-position: 100% }
  to { background-position: 0% }
}

• CodePenリンク
• Skeleton Loading Animation using CSS | #shorts - YouTube

---

ダイアモンド

.diamond {
  border-style: solid;
  border-color: transparent transparent #70c3fa transparent;
  border-width: 0 25px 25px 25px;
  width: 50px;
  height: 0;
  box-sizing: content-box;
  position: relative;
  margin: 20px 0 50px 0;
}

.diamond:after {
  content: "";
  position: absolute;
  top: 25px;
  left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: #70c3fa transparent transparent transparent;
  border-width: 70px 50px 0 50px;
}

• CodePenリンク
• Diamond using HTML and CSS tutorial for beginners using VSCode Editor #shorts #coding - YouTube