CSS Animation impossible

Bonjour à tous,

Je rencontre un problème car je n'arrive pas à faire animer l'image de background sur ma page de login.

Voici le code associé qui semble poser problème ....

Auriez-vous une solution pour m'aider?

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

#animate-area	{ 
	background-image: url(BG_Circle_Dark.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left:0;
	padding: 0;
	width: 100%;
	height: 100%;
	animation: animatedBackground 40s linear infinite;
	-ms-animation: animatedBackground 40s linear infinite;
	-moz-animation: animatedBackground 40s linear infinite;
	-webkit-animation: animatedBackground 40s linear infinite;
}

Voici le html associé ... rien de bien compliqué .. je pense pas m'être trompé dans cette partie là :

<div id="animate-area">
...
</div>

D'avance je vous remercie.

Amicalement,

Julien

Bonjour,

Hors animation, est-ce que votre image de fond s'affiche ? Peut-être un soucis au niveau de l'url de celle-ci ? (en principe on l'encadre par des apostrophes/guillemets pour éviter les problèmes).

Oui je vois bien l'animation .. aucun problème ...

J'ai suivi ton lien et l'animation ne circule pas de gauche à droite comme elle devrait le faire ...
ce n'est pas un problème d'image affichée car je la vois bien ..
Le problème est que l'image ne bouge pas ....

Wollsale a écrit :
Il fonctionne pourtant parfaitement lorsque je copie-colle ton code sur CodePen.

> https://codepen.io/wollsale/pen/eVmvgz

(J'ai réduit le temps d'animation à 4s pour voir plus facilement l'animation)

Tu vois bien ton background malgré tout ?


EDIT

Comme Greg_lumiere le dit, à première vue je te conseillerais de rajouter les guillemets autour de ton URL

background-image: url('url/vers/image');

Je ne peux hélas pas partager mon URL car c'est un site local ...

En revanche, voilà l'ensemble du code ( rien de secret ).

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em,  ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}



ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.about {
  margin: 70px auto 40px;
  padding: 8px;
  width: 260px;
  font: 10px/18px 'Lucida Grande', Arial, sans-serif;
  color: #bbb;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #383838;
  background: rgba(34, 34, 34, 0.8);
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
  color: #eee;
  text-decoration: none;
  border-radius: 2px;
  -webkit-transition: background 0.1s;
  -moz-transition: background 0.1s;
  -o-transition: background 0.1s;
  transition: background 0.1s;
}
.about a:hover {
  text-decoration: none;
  background: #555;
  background: rgba(255, 255, 255, 0.15);
}

.about-links {
  height: 30px;
}
.about-links > a {
  float: left;
  width: 50%;
  line-height: 30px;
  font-size: 12px;
}

.about-author {
  margin-top: 5px;
}
.about-author > a {
  padding: 1px 3px;
  margin: 0 -1px;
}


::-moz-focus-inner {
  padding: 0;
  border: 0;
}

:-moz-placeholder {
  color: #bcc0c8 !important;
}

::-webkit-input-placeholder {
  color: #bcc0c8;
}

:-ms-input-placeholder {
  color: #bcc0c8 !important;
}


body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: white;

}

@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

#animate-area	{ 
	background-image: url(BG_Circle_Dark.png);
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	left:0;
	margin: 0;
	<!-- padding: 0; -->
	width: 100%;
	height: 100%;
	animation: animatedBackground 40s linear infinite;
	-ms-animation: animatedBackground 40s linear infinite;
	-moz-animation: animatedBackground 40s linear infinite;
	-webkit-animation: animatedBackground 40s linear infinite;
}


input, textarea, select, label {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.login {
  margin: 50px auto;
  padding: 18px 20px;
  width: 200px;
  background: #3f65b7;
  background-clip: padding-box;338EC2
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #338EC2, #338EC2);
  background-image: -moz-radial-gradient(cover, #338EC2, #338EC2);
  background-image: -o-radial-gradient(cover, #338EC2, #338EC2);
  background-image: radial-gradient(cover, #338EC2, #338EC2);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: center;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

.login-input {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}

.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  background: #adcbfa;  
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
  background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
  background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
  background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}

.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
  color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}

et pour le HTML :

<html>
   <head>
 <title>Et voici le titre de ma page !</title>
	  <link rel="shortcut icon" type="image/png" href="Secret_logo_rgb.png" />
          
	 <!--Load the AJAX API-->
      <!-- <script type="text/javascript" src="https://www.google.com/jsapi"></script> -->
      <!-- <script type="text/javascript" src="/analytics.js"></script> -->
	 
      <script>
         $("input").keypress(function(e){
            var charCode = !e.charCode ? e.which : e.charCode;
         
            if(/* Test for special character */ )
                e.preventDefault();
         })
      </script>
      </head>
   <body onunload="window.history.forward();">
   <div id="animate-area">
      <div id="navigation_start" class="navbar navbar-default navbar-fixed-top" role="navigation">
         <a class="logo">
         <img src="Secret_logo_rgb.png" align="center" width="140" />
         </a> 
         <a class="logo">
         <img src="Secret%20ANALYTICS.png" align="center" width="820"  />
         </a>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
	   <br />
      <br />
           <br />
		   
 <br /> <br /> <br />
	 	  
      <form class="login" action="/login" method="post"  style="width:293px;text-align:top;margin:auto;" color="white">
  
  <h1>PLEASE SIGN IN</h1>
         <label for="inputEmail" class="sr-only" >Login Name</label> 
         <input type="text" id="inputtext" class="login-input" autocomplete="off" placeholder="Login Name" name="Login" required="" autofocus="" /> 
		 <label for="inputPassword" class="sr-only">Password</label> 
         <input type="password" id="inputPassword" class="login-input" autocomplete="off" data-message="Veuillez renseigner votre nom" placeholder="Password" name="password" required="" />

        
         <button class="login-submit" type="submit" value="Validate">Sign in</button>
         <br />
         <b>Note: Contact the IT Administrator to have an Account if needed.</b>
      </form>
	  </div>
</div>
</div>
</div>


   </body>
</html>

J'espère que vous pourrez m'aider ...
Pour information, le langage d'appel de ces pages est en golang ... Je ne sais pas si cela peut aider....
Modifié par julioIsere (30 Jan 2018 - 15:06)

Hélas non, l'image ne bouge toujours pas ...
Précision, je suis sous Chrome ..

Wollsale a écrit :
Okay je pense que j'ai trouvé la solution

Le comportement d'une animation d'un background-position sur un background-size: cover; semble un peu capricieuse.

J'ai changé dans ton animation

from { background-position: 0 0; } to {background-position: 100% 0;} 

en

 from {background-position: center center;} to {background-position: 100% 0%;}

et ça a l'air de fonctionner.

> https://codepen.io/wollsale/pen/eVmvgz?editors=1100 (ce codepen s'autodétruira dans 60 minutes)

En fait ca fonctionne bien avec l'url 'http://via.placeholder.com/950x550'
en revanche, quand je remplace l'url par mon image, l'image s'affiche bien mais n'est pas animée ( reste immobile ) ...
Merci pour ton aide en tout cas!

Au fait tant que j'y pense, il vaut mieux faire les déclarations avec préfixes propriétaires avant les déclaration normalisées...