Considérons un div avec 100% de largeur et 100vh de hauteur. Je veux le réduire à 50% de largeur et pour cela seulement le bord droit doit aller de 100% à 50%.L'animation Webkit ne déplace que le bord droit d'une div rectangulaire vers la gauche
Comment puis-je y parvenir?
MISE À JOUR:
Mon HTML (il réagit):
<div className={classNames("div-one", { "half-width": this.state.showRegistration })}>
</div>
Et css:
.div-one {
background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
width: 100%;
min-height: 500px;
min-height: 100vh;
}
.div-one.half-width {
width: 50%;
-webkit-animation: right-to-left-div1 0.2s forwards;
animation: right-to-left-div1 0.2s forwards;
}
@keyframes right-to-left-div1{
from{left:10%}
to{left:0%}
}
Avez-vous essayé quoi que ce soit? Si oui, poster des css et html pertinents – Morpheus
@Morpheus J'ai mis à jour ma question – Nitish