Bonsoir,
J'ai un div placé à top 100% qui contient une animation (skill). Malheureusement l'animation est lancée dès l'ouverture de la page, et donc "invisible".
Comment faire pour que l'animation se lance uniquement quand le div qui la contient est visible ?
Ci-dessous le début de mon body :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="container">
  <div class="logiciels">
    <div id="cbp-so-scroller" class="cbp-so-scroller">
      <section class="cbp-so-section">
        <figure class="cbp-so-side cbp-so-side-left"> <img src="images/2.png" alt="img01"> </figure>
        <article class="cbp-so-side cbp-so-side-right">
          <h2>InDesign</h2>
          <p>Texte</p>
          <ul id="skill">
            <li><span class="bar graphic-design"></span>
              <h3>50%</h3>
            </li>
          </ul>
        </article>
La classe "logiciels" à un
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
margin-top: 100%
Pour ce qui est de l'animation, en voici les CSS :
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
#skill {
	list-style: none;
	font: 50px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	width: 296px;
	margin-top: 50px;
	margin-right: auto;
	margin-left: 5px;
	margin-bottom: 0;
	position: relative;
	line-height: 2em;
	padding-top: 30px;
	padding-right: 0;
	padding-bottom: 30px;
	color: #D41D20;
}
#skill li {
	margin-bottom: 50px;
	background: #e9e5e2;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
	background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
	background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
	height: 50px;
	-moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
	-webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
	box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
}
#skill li h3 {
	position: relative;
	top: -25px;
}
.bar {
	height: 50px;
	margin: 1px 2px;
	position: absolute;
	-moz-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
	-webkit-box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
	box-shadow: 0 1px 0px #fcfcfc inset, 0 1px 0 #bebbb9;
}
.graphic-design {
	width: 50%;
	-moz-animation: graphic-design 2s ease-out;
	-webkit-animation: graphic-design 2s ease-out;
	background-color: #f674a4;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
	background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
	background-image: -moz-linear-gradient(top, #f674a4, #e06995);
	background-image: -ms-linear-gradient(top, #f674a4, #e06995);
	background-image: -o-linear-gradient(top, #f674a4, #e06995);
	background-image: linear-gradient(top, #f674a4, #e06995);
}
 @-moz-keyframes graphic-design {
0% {
width:0px;
}
100% {
width:50%;
}
}
@-webkit-keyframes graphic-design {
0% {
width:0px;
}
100% {
width:50%;
Merci pour votre aide et bon week-end,
dh