Question

我正在尝试在用户输入上为box-shadow设置动画，如下所示：

@-webkit-keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 10px 10px 10px #373737;
    }
}

@keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    100% {
        box-shadow: 10px 10px 10px #373737;
    }
}

.form__element:focus {
    -webkit-animation:input-shadow ease-in-out 1s; /* Chrome, Safari, Opera */
    animation:input-shadow ease-in-out 1s;
}

我想让它像bootstrap输入一样工作，但是使用关键帧。

我该怎么做？

Answer 1

将其循环至infinite并将状态重置为100%动画中@keyframes的初始状态。

 @-webkit-keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    50% {
        box-shadow: 10px 10px 10px #373737;
    }
    100% {
        box-shadow: none;
    }
  }

@keyframes input-shadow {
    0% {
        box-shadow: none;
    }
    50% {
        box-shadow: 10px 10px 10px #373737;
    }
    100% {
        box-shadow: none;
    }
 }
.form__element:focus {
    -webkit-animation:input-shadow ease-in-out 1s infinite;
    animation:input-shadow ease-in-out 1s infinite;
}

示例：http://jsfiddle.net/easwee/R2F4W/（已删除：焦点触发而不点击）

动画框阴影

1 个答案: