は、私は2つのラインの間に私のロゴを入れて、私はそれらの2行

Question

.lines { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.lines:before { 
 
    content: ''; 
 
    margin: 0 15px 0px 0px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 
.lines:after { 
 
    content: ''; 
 
    margin: 0 0px 0px 15px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 
.lines img { 
 
    margin: 0 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
     <div class="logo_container"> 
 
      <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div> 
 
     </div>

私は2つのラインの間に私のロゴを入れをアニメーションにしたいと私は、右およびその他の左から1をこれらの2行をアニメーション化します右から左へ ： - ロゴはその位置にとどまります。 （私はjavascriptとjqueryを知らない）

Answer 1

CSS3アニメーションを使用できます。行をアニメーション化する方法によって異なります。あなたができるいくつかの方法があります。 w3 Link

ラインアニメーション1

.lines { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.lines:before { 
 
    content: ''; 
 
    margin: 0 15px 0px 0px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines:after { 
 
    content: ''; 
 
    margin: 0 0px 0px 15px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines img { 
 
    margin: 0 1em; 
 
} 
 

 
.lines { 
 
    right: 0; 
 
    -webkit-animation: dude 1s 1 forwards; 
 
    animation: dude 2s 1 forwards; 
 
} 
 

 
@-webkit-keyframes dude { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
} 
 

 
@keyframes dude { 
 
    0% { 
 
    width: 0; 
 
    } 
 
    100% { 
 
    width: 100%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="logo_container"> 
 
    <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div> 
 
</div>

ラインアニメーション2

.lines { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.lines:before { 
 
    content: ''; 
 
    margin: 0 15px 0px 0px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines:after { 
 
    content: ''; 
 
    margin: 0 0px 0px 15px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines img { 
 
    margin: 0 1em; 
 
} 
 

 
.lines:before, 
 
.lines:after { 
 
    animation: blink-animation 1.5s steps(5, start) infinite; 
 
    -webkit-animation: blink-animation 1.5s steps(5, start) infinite; 
 
} 
 

 
@keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
} 
 

 
@-webkit-keyframes blink-animation { 
 
    to { 
 
    visibility: hidden; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="logo_container"> 
 
    <div class="lines"><img src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div> 
 
</div>

イメージアニメーション

.lines { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.lines:before { 
 
    content: ''; 
 
    margin: 0 15px 0px 0px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines:after { 
 
    content: ''; 
 
    margin: 0 0px 0px 15px; 
 
    border: 2px solid black; 
 
    flex: 1; 
 
} 
 

 
.lines img { 
 
    margin: 0 1em; 
 
} 
 

 
.image { 
 
    -webkit-animation: spin 4s linear infinite; 
 
    -moz-animation: spin 4s linear infinite; 
 
    animation: spin 4s linear infinite; 
 
} 
 

 
@-moz-keyframes spin { 
 
    100% { 
 
    -moz-transform: rotate(360deg); 
 
    } 
 
} 
 

 
@-webkit-keyframes spin { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    } 
 
} 
 

 
@keyframes spin { 
 
    100% { 
 
    -webkit-transform: rotate(360deg); 
 
    transform: rotate(360deg); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="logo_container"> 
 
    <div class="lines"><img class="image" src="https://d30y9cdsu7xlg0.cloudfront.net/png/967511-200.png"></div> 
 
</div>