项目实战中遇到的关于transition 和 animation 的犯错体会

Posted 2020-10-19 chvias

响应式简历里面的头像边框要求鼠标悬停在头像区域时，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;
    }
}