CSS3 - 动画转换？

Question

在这里，我有一个动画，在您悬停的标题旁边显示一个闪烁的边框：

#link_list a:hover {
border-left: 10px solid #E3E3E3;
animation: blink 1s infinite;
-webkit-animation: blink 1s infinite;
-moz-animation: blink 1s infinite;
-o-animation: blink 1s infinite;
animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
}

@keyframes blink {
0%  { border-left: 10px solid rgba(215, 215, 215, 1); }
    50% { border-left: 10px solid rgba(215, 215, 215, 0); }
        100% { border-left: 10px solid rgba(215, 215, 215, 1); }
}

现在，问题是转换不支持动画。 我已经使用animation-delay属性修改了它以进行转换，但由于动画正在运行，因此转换不起作用。

FIDDLE

Answer 1

这有点像黑客的做法，但你可以通过定位来达到你想要的效果。

基本上，当链接没有悬停时，不要将边框宽度设置为0px，而是将宽度设置为10px（与onHover相同），并使用相对定位将元素向左移动10px，就好像边框一样不存在。

然后将left属性的动画设置为0.2s ease并将left: 0设置为：悬停状态。

#link_list  a{
    border-left: 10px solid transparent;
    transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease, left 0.2s ease;    
    position: relative;
    left: -10px;
}

#link_list a:hover {
    left: 0px;
}

有了这个，您也可以删除转换延迟。

JSFiddle

Answer 2

您应该使用 left: -10px; 属性而不是 transition-delay: 0.2s; 动画属性，将此属性添加到 things #link_list a{ } ，

检查此 Demo jsFiddle

CSS

#link_list  a{
    color: inherit;
    text-decoration: none;
    border-left: 0px solid transparent;
    border-width: 0px;
    transition: border-left 0.2s ease, border-bottom 0.2s ease, border-right 0.2s ease;
    left: -10px;    // ADD THIS NEW
}