項目實戰中遇到的關於transition 和 animation 的犯錯體會

響應式簡歷裏面的頭像邊框要求鼠標懸停在頭像區域時，box-shadow放大後再縮小的閃爍效果

 

一開始用的transition，效果接近，但沒有閃爍效果

.user-inform .user-img {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    height: 120px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #88bde8; transition: box-shadow 1s ease 0s; 

  .user-inform .user-img:hover {

       box-shadow: 0 0 5px 10px #88bde8;

一開始甚至把transition的一些屬性和animation的搞混了，寫成了 transition: box-shadow 1s ease infinite; 在chrome的調試工具窗中發現了報錯

注意：transition的屬性是 transition-property（屬性）, transition-duration（持續時間）, transition-timing-function（動效/緩動函數）, transition-delay（延遲時間）

因此transition 並無 infinite 這個屬性

 

改用animation後，閃爍效果成功作出，可是變成一直在閃爍，而不是最初想要的只有鼠標懸停時才變化

.user-inform .user-img {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    height: 120px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #88bde8;
    animation: circleRun 1s ease infinite;
}

@keyframes circleRun {
    0% {
        box-shadow: 0 0 0 5px #88bde8;
    }
    50% {
        box-shadow: 0 0 5px 10px #88bde8;
    }
    100% {
        box-shadow: 0 0 0 5px #88bde8;
    }
}

 

再修改一下，成功了

.user-inform .user-img {
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
    width: 120px;
    height: 120px;
    background-color: white;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #88bde8;
}

.user-inform .user-img:hover {
    animation: circleRun 1s ease infinite;
}

@keyframes circleRun {
    0% {
        box-shadow: 0 0 0 5px #88bde8;
    }
    50% {
        box-shadow: 0 0 5px 10px #88bde8;
    }
    100% {
        box-shadow: 0 0 0 5px #88bde8;
    }
}