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设置为:hover状态。

#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
}