Learn_CSS_CLS5_animationDEMO

for Learning book demo use

by Loki Jiang

HTML

<div class="base">HELLO WORLD</div>
<div class="btn">Button</div>
<div class="load">Loading</div>
<div class="rgb">Loki</div>

CSS

body {
  background: #333;
  margin: 0;
  color: white;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  text-align: center;
}

/* 宣告關鍵影格為動畫、動畫名稱、開始、結束 */
div.base {
  width: 100px;
  height: 100px;
  background: red;

  /* 動畫名稱 */
  /* animation-name: demo1; */
  /* 動畫間隔 */
  /* animation-duration: 1s; */
  /* 速度函式 */
  /* animation-timing-function: ease; */
  /* 動畫延遲 */
  /* animation-delay: 0.1s; */
  /* 播放次數 */
  /* animation-iteration-count: 3; */
  /* 循環交替或反向播放*/
  /* animation-direction: alternate; */
  /*播放基數次時可考慮是否要停留於尾格，否則會還原到初始格狀態*/
  /* animation-fill-mode: forwards; */

  /* 以上可縮寫成 */
  animation: demo1 1s infinite alternate forwards;
}

@keyframes demo1 {
  from {
    background: red;
  }

  to {
    background: yellow;
  }
}

/**************/
div.btn {
  width: 100px;
  height: 50px;
  background: orange;
  position: relative;
  border-radius: 5px;
  line-height: 50px;
  overflow: hidden;
}

div.btn:after {
  content: "";
  background: linear-gradient(to right bottom, #ffffff00 30%, #ffffff88 50%, #ffffff00 70%);
  transform: translateX(-75%);
  position: absolute;
  left: -100%;
  top: -100%;
  right: -100%;
  bottom: -100%;
  animation: demo2 2s linear infinite;
}

/* 宣告關鍵影格為動畫、動畫名稱、開始、結束 */
@keyframes demo2 {
  50% {
    transform: translateX(-5%);
  }

  100% {
    transform: translateX(75%);
  }
}

/****************/
div.load {
  position: relative;
  width: 100px;
  text-align: center;
}

div.load::before,
div.load::after {
  content: "";
  position: absolute;
  top: -2rem;
  left: -100%;
  right: -100%;
  bottom: 2rem;
  border: 1px solid #eee;
}

div.load::after {
  animation: demo3 10s linear infinite;
}


@keyframes demo3 {
  0% {
    right: 200%;
  }

  25%,
  75% {
    background: #500;
  }

  50% {
    background: #e00;
  }

  100% {
    right: -100%;
  }
}

/**************************/
div.rgb {
  font-size: 5rem;
  font-family: Arial, Helvetica, sans-serif;
 ...