Wie wird die Breite von links statt von rechts schrumpfen?

1- Ich versuche ein Bild verschwinden zu lassen, indem ich seine Container-Position (Position: fixed) von 100% auf 0% animiere, aber es beginnt von rechts, ich möchte es von links starten lassen. Ich habe viele Dinge ausprobiert - wie Seitenrichtung ändern oder das div nach rechts setzen: 0px; statt links: 0px; - Aber es hat nicht funktioniert. Wie kann ich das tun?Wie wird die Breite von links statt von rechts schrumpfen?

2- möchte ich die div die Form eines Kreises haben, während die Breite schrumpft und ich

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

das zu erreichen, aber am Ende der Animation ist es nicht eine kreisförmige Gestalt annehmen . Was ist ein guter Ansatz, um einen Kreis zu bilden?

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/

Quelle

2017-09-29 Khaled Zakaria

Hallo, willkommen Überlauf Stack! Ich habe Ihre Fiddle in ein "Snippit" umgewandelt (die Schaltfläche <<> im Frageneditor, Sie können die Frage bearbeiten, um sie zu sehen), damit die Beantworter Ihren Code an einer Stelle sehen und in ihre Antwort kopieren können. – msanford

Sie benötigen die Marge und die Breite zu animieren den Effekt, den ich Sie denken zu bekommen.

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>

Quelle

2017-09-29 13:45:51 epascarello

Animieren die left Eigenschaft:

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>

Quelle

2017-09-29 13:51:14 LinkinTED

Sie haben nicht die Idee bekommen, was ich hier erreichen möchte. Bitte sehen Sie sich die Animation an und schlagen Sie dann vor, was das Gleiche aber von links angeht. –

Koordinaten immer von der linken oberen Ecke beginnen.

Mit Keyframes können wir die Bildkoordinaten mit der gleichen Geschwindigkeit nach rechts verschieben, je kleiner die Breite ist.

Sie wendeten bereits einen Kreis Effekt border-bottom-right-Radius & border-top-right-Radius verwenden, Ich habe gerade 'richtig' zu 'links'.

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>

Quelle

2017-09-29 13:53:28

Wie wird die Breite von links statt von rechts schrumpfen?

Antwort

Verwandte Themen