CSS3 Animation, stoppe animasjon halveis

[Toni Giskemo]

Hvordan kan jeg pause en CSS3 Animasjon halvveis i sitt løp i x-antall sekunder?

[kjekset]

-webkit-animation-duration: 10s;

... gjør at animasjonen stoppes i 10 sekunder før den begynner på nytt. Er det det du trenger? Hivis nei, kan du være litt mer spesifikk?

[Toni Giskemo]

Jeg kal ha en bil til å kjøre fra venstre til høyre på en nettside. Jeg har prøvd å sette opp som 2 animasjoner, der den første varer i 3 sekunder, det ventes 1 sekund og så starter animasjon 2. Problemet da er at jeg ikke kan sette iteration-count til infinite for den bare looper den siste animasjonen og ikke begge to.

Webside:
http://student.ecademy.no/WDv115/39843/Hovedmappe%20Ovelser/Animasjon/Leksjon%203/Bil%20som%20kj%C3%83%C2%B8rer/bil_animasjon.html

 

CSS:

http://student.ecademy.no/WDv115/39843/Hovedmappe%20Ovelser/Animasjon/Leksjon%203/Bil%20som%20kj%C3%83%C2%B8rer/style.css

 

se #bil i CSS-fil

Endret 27. oktober 2015 av Toni Giskemo

[ahw_]

Er ingen ekspert men hva med noe som dette?

 

https://jsfiddle.net/3c0aqdhq/1/

<div class="element"></div>

.element {
    width: 100px;
    height: 100px;
    background: #000;
    animation: example 5s;
}

@keyframes example {
    0% {
        margin-left: 0px;
    }
    40%, 60% {
        margin-left: 50px;
    }
    100% {
        margin-left: 100px;
    }
}

Endret 27. oktober 2015 av ahw_

[Toni Giskemo]

 

Er ingen ekspert men hva med noe som dette?

 

https://jsfiddle.net/3c0aqdhq/1/

<div class="element"></div>

.element {
    width: 100px;
    height: 100px;
    background: #000;
    animation: example 5s;
}

@keyframes example {
    0% {
        margin-left: 0px;
    }
    40%, 60% {
        margin-left: 50px;
    }
    100% {
        margin-left: 100px;
    }
}

Spot on! Å sette de midterste prosentene var det som skulle til. Dessverre er det da ikke mulighet for å styre ease-in/out ved stop og start på midten, men det får være bra nok.

[ahw_]

Har prøvd å mekke sammen noe tull som kanskje kan hjelpe litt (eller ikke):

https://jsfiddle.net/rbvh0v24/7/

 

Har dessverre ikke funnet noen måte å få perfekt «easing» etter behov med denne metoden. Det ser ikke så aller verst ut i dette spesifikke eksemplet, men du har kanskje litt andre behov. Det kan også hende at jeg innbiller meg at det finnes spor av «easing» i midten.

 

PS: Hvis koden er rotete er det fordi jeg så og si aldri har hatt noe med CSS-animasjoner å gjøre før.. Må bare beklage i så fall!

Endret 31. oktober 2015 av ahw_

[ahw_]

Har prøvd å få perfekt easing i midten uten hell med metodene vi har prøvd. Fikk også hjelp på IRC til å splitte koden min opp i to animasjoner, men easing funket av en eller annen grunn ikke som forventet, og vi måtte gi opp.

 

Til slutt gjorde jeg en annen vri, og her er resultatet, helt enkelt (men se for all del min forrige løsning også):

https://jsfiddle.net/fjp64cm3/1/

 

Løsningen går ut på å ha to elementer (biler i ditt tilfelle, og bokser i mitt eksempel), som byttes ut i midten. Du kan tildele dem forskjellige «timing functions».

Endret 31. oktober 2015 av ahw_

[Toni Giskemo]

Har prøvd å mekke sammen noe tull som kanskje kan hjelpe litt (eller ikke):

https://jsfiddle.net/rbvh0v24/7/

 

Har dessverre ikke funnet noen måte å få perfekt «easing» etter behov med denne metoden. Det ser ikke så aller verst ut i dette spesifikke eksemplet, men du har kanskje litt andre behov. Det kan også hende at jeg innbiller meg at det finnes spor av «easing» i midten.

 

PS: Hvis koden er rotete er det fordi jeg så og si aldri har hatt noe med CSS-animasjoner å gjøre før.. Må bare beklage i så fall!

Dette åpnet øynene mine for mye man kan manipulere ved å dele opp løpet nok mange ganger og sette de rette verdiene underveis. Nå gjør bilen akkurat det jeg ønsket opprinnelig, pluss litt til med å snu utfor bildet å komme tilbake