を1つの列に置くと、他の列の<a>要素が点滅します

Question

<a>の要素を1つの列に置くと、別の列の要素<a>が点滅して別の列に表示されることがあります。

.cvtitle { 
 
    font-weight: 400; 
 
    text-transform: uppercase 
 
} 
 
#cvpress { 
 
    -webkit-columns: 4 250px; 
 
    -moz-columns: 4 250px; 
 
    columns: 4 250px; 
 
    -webkit-column-gap: 20px; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 20px; 
 
    /* Firefox */ 
 
    column-gap: 20px; 
 
} 
 
#cvexhibitions { 
 
    -webkit-columns: 2 400px; 
 
    -moz-columns: 2 400px; 
 
    columns: 2 400px; 
 
    -webkit-column-gap: 20px; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 20px; 
 
    /* Firefox */ 
 
    column-gap: 20px; 
 
} 
 
.twocolumns { 
 
    -webkit-columns: 2 400px; 
 
    -moz-columns: 2 400px; 
 
    columns: 2 400px; 
 
    -webkit-column-gap: 20px; 
 
    /* Chrome, Safari, Opera */ 
 
    -moz-column-gap: 20px; 
 
    /* Firefox */ 
 
    column-gap: 20px; 
 
} 
 
#cvpress a { 
 
    display: inline-block; 
 
    transform: translatex(0px); 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
#cvpress a:hover { 
 
    color: #97cacc; 
 
    transform: translatex(5px); 
 
    transition: all 0.3s ease-in-out; 
 
}

<div id="cvpress"> 
 
    <span class="cvtitle">2016 |</span> 
 
    <br> 
 
    <a href="/updates/2016/5/22/feature-in-die-angst-magazine-no2">Die Angst Magazine</a> 
 
    <br> 
 
    <a href="/updates/2016/5/22/noisy-paint-box-exhibition-feature-in-the-wave-newspaper">'The Wave' Newspaper</a> 
 
    <br> 
 
    <a href="/updates/2016/5/22/european-photography-98-feature-of-dear-artist-we-regret-to-tell-you">European Photography #98</a> 
 
    <br> 
 
    <a href="/updates/2016/5/24/featured-in-common-ground-journal-magazine">Common Ground issue 5</a> 
 
    <br> 
 
    <a href="/updates/2016/5/22/incandescent-no-9-feature-of-color-nights">Incandescent Issue 9</a> 
 
    <br> Phose Magazine 
 
    <br> Tika Arts 
 
    <br> Visual Opinion Magazine 
 
    <br> 
 
    <span class="cvtitle">2015 |</span> 
 
    <br> Glamour 
 
    <br> The Week - Photo Blog 
 
    <br> This very instant 
 
    <br> austere magazine 
 
    <br> Magnet 
 
    <br> Strant Magazine 
 
    <br> Don't Take Pictures - at home 
 
    <br> Saatchi Art Blog 
 
    <br> Splash & Grab 
 
    <br> Trip 
 
    <br> Amadeus Magazine 
 
    <br> Portfolio blog 
 
    <br> <a href="/updates/2016/5/24/cache-in-fisheye-magazine-online">Fish Eye</a> 
 
    <br> SVA website 
 
    <br> broad Strokes - Art Fix 
 
    <br> <a href="/updates/2016/5/23/nyip-interview-about-dear-artist-we-regret-to-tell-you">NYIP Blog</a> 
 
    <br> <a href="/updates/2016/5/22/hyperallergic-feature-dear-artist-we-regret-to-tell-you">Hyperallergic</a> 
 
    <br> <a href="/updates/2016/5/22/featureshoot-feature-dear-artist-we-regret-to-tell-you">FeatureShoot</a> 
 
    <br> <a href="/updates/2016/5/22/dead-water-in-its-nice-that-blog">It's Nice That</a> 
 
    <br> <a href="/updates/2016/5/23/petapixle-on-dear-artist-book">PetaPixel</a> 
 
    <br> S Moda 
 
    <br> <a href="/updates/2016/5/23/co-design-photo-essay-about-dead-water-project">Fast Co. Design</a> 
 
    <br> klonblog 
 
    <br> Artisan 
 
    <br> Design taxi 
 
    <br> DCCP 
 
    <br> Steadfast Magazine v.01 
 
    <br> Pahrenheit Magazine 
 
    <br> Nailed magazine 
 
    <br> register citizen Newspaper 
 
    <br> <a href="/updates/2016/5/23/aint-bad-magazine-from-here-on">Aint Bad - "From Here On"</a> 
 
    <br> WaterFall 
 
    <br> Marathon Blog 
 
    <br> All the best, Alice 2015 
 
    <br> 365 Artists, 365 Days Project 
 
    <br> Streit House Space 
 
    <br> #Photography issue 14 
 
    <br> Streit House Space 
 
    <br> Streit House Space Zine 
 
    <br> #Photography issue 14 
 
    <br> Artwork - artist of the week 
 
    <br> Phosphene Magazine 
 
    <br> No Culture Icons 
 
    <br> Lensculture 
 
    <br> SuckerPunch 
 
    <br> Precise Moment 
 
    <br> SF MOMA Tumbler 
 
    <br> All the best, Alice 2015 
 
    <br> 365 Artists, 365 Days Project 
 
    <br> 
 
    <span class="cvtitle">2014 |</span> 
 
    <br> Dienacht Magazine Blog 
 
    <br> Wave-pool Interview Blog 
 
    <br> Mossfull Blog 
 
    <br> Haaretz Photography Blog 
 
    <br> Mabel Blog 
 
    <br> #Photography magazine 
 
    <br> Der Grief - Book 
 
    <br> Musee' Magazine-No.10 Vo.1 
 
    <br> Musse Magazine Interview 
 
    <br> Umter 
 
    <br> Telephone Weekly paper 
 
    <br> R0P Magazine 
 
    <br> GUP 
 
    <br> dodho 
 
    <br> Photogrphy Philosophy blog 
 
    <br> Photogrpher.RU 
 
    <br> Pulp Collectors 
 
    <br> 30 under 30 women photographers 
 
    <br> loeil de la photographie 
 
    <br> The Artist Catalogue - V.3 Issue1 
 
    <br> Lenscratch 
 
    <br> Digital Photography 
 
    <br> LensCulture 
 
    <br> Photo Digest 
 
    <br> Untitled Blog 
 
    <br> Blow Photo 
 
    <br> Fresh Paint Catalog 
 
    <br> Square Space- issue #7 
 
    <br> The Telegraph UK 
 
    <br> Oitzarisme 
 
    <br> 
 
    <span class="cvtitle">2013 |</span> 
 
    <br> PH Magazine issue #38 
 
    <br> Aint Bad magazine 
 
    <br> Doc! magazine issue #17 
 
    <br> Leoil de la photographie 
 
    <br> Harama magazine issue #4 
 
    <br> Tonelit magazine issue #5 
 
    <br> Lenscratch family onlie exhibition 
 
    <br> F-Stop magazine issue #62 
 
    <br> Mull it Over Blog 
 
    <br> Empty Mirror 
 
    <br> Saatchi onlie spotlight on photography 
 
    <br> feel free company 
 
    <br> 
 
    <span class="cvtitle">2012 |</span> 
 
    <br> Israel Ha'yom newspaper 
 
    <br> The independent UK 
 
    <br> F-Stop magazine issue #53 
 
    <br> The garlic bread magazine 
 
    <br> Jerusalem Net 
 
    <br> Zman Maal'e Local Newspaper 
 
    <br> Culture 24 
 
    <br> cituated 
 
    <br> size doesnt matter 
 
    <br> 
 
    <span class="cvtitle">2011 |</span> 
 
    <br> Composition magazine issue #20 
 
</div>

私は下のリンクをホバリングフィドル点滅を参照してくださいました。周り

JSFiddle Demo

Answer 1

非常に奇妙な仕事 -

どうやらCSS3の列が3つの以上の列の上にレンダリングするトランジションを好きではありません！それは私の質問で実証した不具合を引き起こします。したがって、私はアニメーションを作成し、マウスを外に出す（ホバーエンドの後に）イベントを作成しました：

#cvpress a { 
     display: inline-block;transition: all 0.3s ease-out; 
    } 

    #cvpress a:hover { 
     color: #97cacc; 
     display: inline-block; 
     position: relative; 
     animation-name: move; 
     animation-duration: 0.3s; 
     animation-iteration-count: 1; 
     animation-timing-function: ease-in-out; 
     transform: translatex(5px); 
    } 

    @keyframes move { 
     0% { 
      transform: translatex(0px); 
     } 
     100% { 
      transform: translatex(5px); 
     } 
    } 

IT作品は好きです！