我在css中發現了這個眨眼影片的代碼筆，但我不明白他們為什么要這樣使用0%、100%和5%、95%，誰能解釋一下為什么會這樣？ 改變這些值會影響影片的速度。
* {
box-sizing: border-box;
}
.face {
display: flex;
justify-content: space-between;
width: 150px;
height: 200px;
padding: 30px;
background: tomato;
transition: .3s easy-in-out;
}
.face:hover {
background: 綠色。
}
.eye {
background: white;
width: 15px;
height: 15px;
border-radius: 50%;
-webkit-transform-origin: 50%;
-webkit-animation: blink 5s infinite;
}
@-webkit-keyframes blink {
0%, 100% {
transform: scale（1, .05）。
}
5%,
100% {
transform: scale(1, 1) 。
}
這里也是代碼的鏈接。https://codepen.io/obaidnadeem/pen/rNwWexx
uj5u.com熱心網友回復：
這個0%、100%、5%和再次100%是影片關鍵幀的屬性。只有這些關鍵幀將被影片化。
https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
uj5u.com熱心網友回復：
代碼中的第一個100%是多余的，因為第二個100%覆寫了它。
在95%的情況下，第一個100%并不是多余的。正如你所指出的，這些設定改變了時間。
眼睛睜開的時間（比例y為1）稍短，眨眼的時間（從比例1移到0.5再移回來）稍長，睜眼和閉眼的時間是一樣的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/319395.html
標籤：