CSS 動態效果 補

CSS animations MDN

CSS Animations W3S
CSS Animations Level 1

animation = <single-animation>#

<single-animation> =
1<time> ||
2<easing-function> ||
3<time> ||
4<single-animation-iteration-count> ||
5<single-animation-direction> ||
6<single-animation-fill-mode> ||
7<single-animation-play-state> ||
8[ none | <keyframes-name> ]

(2)<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>

(4)<single-animation-iteration-count> = infinite|<number [0,∞]>

(5)<single-animation-direction> = normal|reverse|alternate|alternate-reverse

(6)<single-animation-fill-mode> = none|forwards|backwards|both

(7)<single-animation-play-state> = running |paused

(8)<keyframes-name> = <custom-ident> | <string>

(2.2)<linear-easing-function> = linear( <linear-stop-list> )

(2.3)<cubic-bezier-easing-function> = ease | ease-in |ease-out |ease-in-out|cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

(2.4)<step-easing-function> = step-start| step-end |steps( <integer> [, <step-position> ]? )

.header > .nav-container > li {
  float: left;
  height: 40px;
  line-height: 40px;
  padding: 0px 10px;
  margin: 0px 10px;
  color: #000;
  list-style: none;
  cursor: pointer;
  transition-duration: 0.3s;
}
.header > .nav-container > li:hover {
  color: #fff;
  transition-duration: 0.3s;
}

.wrong {
  animation-name: wrongAnimation;
  animation-duration: 0.2s;      //動畫時間
  animation-iteration-count: 5; //重複 5 次
}
@keyframes wrongAnimation {
  to {
    border: 2px solid #ffd54f;
  }
}

transition 該怎麼設定
要改什麼才會變化

.content .contact {
  position: fixed;
  right: 50px;
  bottom: 50px;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #333;
  color: #fff;
  text-align: center;
  border-radius: 50%;
  box-shadow: 1px 1px 5px 0px #666;
  cursor: pointer;
}
.content .contact:hover {
  transform: translateY(-5px);
  transition-duration: 0.3s;
}

圖片以<img>方式呈現，原圖為直立長方形 => 圓形置中

img {
  width: 絕對長度;
  height: 絕對長度;
  object-fit:cover;
  object-position: center;
  bdrs: 50%; 圓形
  transition: all .6s; 才有縮放緩衝效果
}
img:hover {
  transition-duration 轉場時間
  transform 轉變: scale(1.2); hover才放大
}

div tag image note