背景画像を含む要素を表示するにはCSSアニメーション/ javascriptを使用してください

私は背景画像を持つdivタグを持っています。私は、CSSのアニメーションを使用するか、javascript/jqueryの組み合わせを使用して、ページが読み込まれたときに背景イメージがどのように表示されるかをアニメーション化します。現在、私は同じ長さで作成した2つの垂直の境界線を持ち、両方とも同じ位置から開始します。ページが読み込まれると、1つの境界線は自動的に右側に移動し、もう一方の境界は左側に移動します。この遷移の間、私は、背景画像を持つdivタグをゆっくりと表示したい。事前に背景画像を含む要素を表示するにはCSSアニメーション/ javascriptを使用してください

.background-img { 
 
    width: 10px; 
 
    margin: 0 auto; 
 
} 
 
.borders { 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t width: 8px; 
 
\t background-color: blue; 
 
\t height: 50px; 
 
\t border-radius: 4px; 
 
} 
 

 
.left-vertical-border { 
 
\t animation-name:move-left; 
 
\t animation-duration: 2s; 
 
\t animation-timing-function: ease-in; 
 
\t animation-fill-mode: forwards;  
 

 
} 
 

 
.right-vertical-border { 
 
\t top: 8px; 
 
\t animation-name:move-right; 
 
\t animation-duration: 2s; 
 
\t animation-timing-function: ease-in; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
@keyframes move-left { 
 
\t from{transform: translateX(0px);} 
 
\t to{transform: translateX(-100px);} 
 
} 
 

 
@keyframes move-right { 
 
\t from{transform: translateX(0px);} 
 
\t to{transform: translateX(100px);} 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> \t 
 
\t \t <title>Creating Vertical borders using animation/javascript</title> \t \t \t 
 
\t </head> 
 
\t <body> 
 
\t \t <div class="left-vertical-border borders"></div> 
 
\t \t <div class="background-img">fake bg image</div> 
 
\t \t <div class="right-vertical-border borders"></div> 
 
\t </body> 
 
</html>

ありがとう：ここで私がこれまで持っているものです！

出典

2016-05-19 Yi Ren

をこのリンクjsfiddleまたはplunker – brk

チェックアウトを作成してくださいすることができますhttps://jsfiddle.net/5Lkbmawq/7/ – NuttLoose

CSSを追加します。

.background-img { 
    width: 10px; 
    height: 10px; 
    margin: 0 auto; 
    animation-name:img-ani; 
    animation-duration: 2s; 
    animation-timing-function: ease-in; 
}    

@keyframes img-ani { 
    from{opacity:0;} 
    to{opacity: 1;} 
}

出典

2016-05-19 05:13:10 Krishnakant

背景画像を含む要素を表示するにはCSSアニメーション/ javascriptを使用してください

答えて

関連する問題