Discussion :

[OcB974]

Bonjour,

ça fais quelques jours que j'essaye de chercher un problème que je ne trouve pas, malgré mes recherches sur internet.

Mon problème: J'ai créer un bloc avec un box shadow comme l'image ci-dessous (Image 01). Mais j'ai animé ce bloc. Malheureusement, lorsque ce bloc est animé, le Box shadow est sur le bloc (Image 02). J'aimerais lors de l'animation, que la box shadow reste au même endroit, c'est à dire au dessous du bloc, juste pour voir l'ombre et non les deux bandes gris ^^. Enfin bref, j'ai déjà fais des recherches, mais là je bloque .

Image 01



Image 02



Je veux que mon résultat final arrive comme l'image 01, mais quand l'animation commence , j'aimerais aussi que le box shadow sois en dessous du bloc. (Animation du bloc et du box shadow en dessous).

J'ai déjà essayé les z-index, mais ça reste au dessus.

Je vous donne mes codes (CSS & HTML)

Code :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
 
/**
* Ma box
*/
 
.box{
    width: 200px ;
    height: 30px;
    background: #980BB4 ;
}
 
/**
*   La box shadow (lifted-shadow)
*/
 
.lifted-shadow{
  position: relative;
}
 
.lifted-shadow:before, .lifted-shadow:after{
	z-index: -1;
    position: absolute;
    content:"";
    bottom: 12px;
    height:100px;
    max-height:30%;
    left: 4%;
    width: 92%;
    max-width: 300px;
    background: #777;
    -webkit-box-shadow: 0 11px 8px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 11px 8px rgba(0, 0, 0, 1);
    box-shadow: 0 11px 8px rgba(0, 0, 0, 1);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
 
.lifted-shadow:after{
	-webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 4%;
    left: auto;
}
 
/**
*   L'animation (keyframe)
*/
 
.moveBox{
    animation: moveBox 1s ease-in-out 0s;
    -moz-animation: moveBox 1s ease-in-out 0s;
    -webkit-animation: moveBox 1s ease-in-out 0s;
}
 
@keyframes moveBox {
    from { 
        -webkit-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: perspective(600px) rotateY(85deg);
        -moz-transform: perspective(600px) rotateY(85deg);
        -o-transform: perspective(600px) rotateY(85deg);
        -ms-transform: perspective(600px) rotateY(85deg);
        transform: perspective(600px) rotateY(85deg);
    }
    to {
        -webkit-transform-origin: 0% 0%;
        -moz-transform-origin: 0% 0%;
        -o-transform-origin: 0% 0%;
        -ms-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
    }
}

J'espère que vous pourrez m'apporter la petite graine pour empêcher ce problème .

PS: J'ai entendu dire que il y'a un système d'overflow pour les animations , mais pas sur que c'est sa le problème :/

Merci à vous, la communauté

[NoSmoking]

Bonjour,
je ne saisie pas pourquoi tu ne fais pas simplement un truc du style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
@keyframes moveBox {
    from {
      width: 0px ;
    }
    to {
      width: 200px ;
    }
}

comme il nous manque le HTML j'ai supposé que l'on avait cela

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="box lifted-shadow moveBox"></div>

Une remarque, dans ce code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.moveBox{
    animation: moveBox 1s ease-in-out 0s;
    -moz-animation: moveBox 1s ease-in-out 0s;
    -webkit-animation: moveBox 1s ease-in-out 0s;
}

attention à toujours mettre la notation non préfixée en dernier, c'est la version normalement stable

[CCyrillus]

tu peut simplement inverser le role de tes boites , par exemple : http://codepen.io/anon/pen/VLKKbW

[OcB974]

En faite je viens de découvrir les animations avec du CSS ^^, donc j'ai eu un peu de mal, mais grâce à vous deux j'ai pu réglé mon problème .

Merci pour vos réponse ! .