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属性将其固定为用于过渡，但是由于动画正在运行，所以过渡不起作用。

小提琴

Answer 1

这是一种技巧，但是您可以通过定位来实现所需的效果。

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

然后将left属性的动画设置为0.2s ease并在：hover状态下将left: 0设置为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{ } ，

检查此演示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
}