Comment faire pour commencer à réduire la largeur de la gauche au lieu de droite?

1- J'essaye de faire disparaître une image en animant sa largeur de conteneur (position: fixe) de 100% à 0% mais elle part de la droite, je veux la faire partir de la gauche. J'ai essayé beaucoup de choses, comme changer la direction de la page ou régler le div à droite: 0px; au lieu de gauche: 0px; - Mais ça n'a pas marché. Comment puis-je faire cela?Comment faire pour commencer à réduire la largeur de la gauche au lieu de droite?

2- Je veux la div d'avoir la forme d'un cercle tandis que la largeur diminue et moi

border-bottom-right-radius: 500px; 
border-top-right-radius: 500px;

pour y parvenir, mais à la fin de l'animation, il ne prend pas une forme circulaire . Quelle est une bonne approche pour en faire un cercle?

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-right-radius: 500px; 
 
    border-top-right-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

https://jsfiddle.net/kalidzakaria/xzs1r9qp/

Source

2017-09-29 Khaled Zakaria

Salut, bienvenue à Stack Overflow! J'ai converti votre violon dans un "snippit" (le bouton '<>' dans l'éditeur de question, vous pouvez éditer la question pour la voir), qui permettra aux answerers de voir votre code à un endroit, et de le copier dans leur réponse. – msanford

Vous devez animer la marge et la largeur pour obtenir l'effet que je pense que vous voulez.

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    margin-left: 0%; 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    margin-left: 100%; 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

Source

2017-09-29 13:45:51 epascarello

animez la propriété left:

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 

 
@keyframes move3 { 
 
    0% { 
 
    left: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
    100% { 
 
    left: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    } 
 
} 
 

 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

Source

2017-09-29 13:51:14 LinkinTED

Vous n'avez pas eu l'idée de ce que je veux réaliser ici. S'il vous plaît voir l'animation et ensuite suggérer ce qui fait la même chose mais commence à partir de la gauche. –

coordonnées commencent toujours dans le coin supérieur gauche. En utilisant les images-clés, nous pouvons déplacer les coordonnées de l'image vers la droite à la même vitesse que sa largeur plus petite.

Vous avez déjà appliqué un effet de cercle à l'aide de border-bottom-right-radius & border-top-right-radius, j'ai juste changé 'right' en 'left'.

document.getElementsByClassName("sick")[0].style.animation = "move3 3s linear forwards";"move3 3s linear forwards";

.sick { 
 
    position: fixed; 
 
    overflow: hidden; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 150%; 
 
    height: 100%; 
 
    z-index: 999; 
 
    background: url('http://cfile10.uf.tistory.com/image/2649725057B9A2BB0CE4EE') no-repeat; 
 
    border-bottom-left-radius: 500px; 
 
    border-top-left-radius: 500px; 
 
} 
 
@keyframes move3 { 
 
    0% { 
 
    width: 100%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    left: 0%; 
 
    } 
 
    100% { 
 
    width: 0%; 
 
    /* Firefox 16+, IE 10+, Opera */ 
 
    height: 100%; 
 
    left: 100%; 
 
    } 
 
} 
 
.explain { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<div class="sick"> 
 

 
</div> 
 
<div class="explain"> 
 
    <h1>Site Here</h1> 
 
    <h2>Concept</h2> 
 
</div>

Source

2017-09-29 13:53:28

Comment faire pour commencer à réduire la largeur de la gauche au lieu de droite?

Répondre

Questions connexes