animatie css

#1
cornel001

Posted 25 May 2016 - 08:52

Scapat de la balamuc

Grup: Senior Members
Posts: 3,261
Înscris: 30.07.2005

Incerc sa mut pe ecran un element.
Folosind animation si keyframes, cu translate.
Browserul aloca la fiecare pas din keyframes, aceeasi durata, calculata din durata totala.
Dar daca distanta de la pas la pas, difera, atunci, ca se incadreze in aceeasi durata, viteza variaza.

Incerc sa fac sa pastreze o viteza constanta, folosind cat mai mult css si cat mai putin javascript.
O varianta era sa setez durata diferit in fiecare pas din keyframes.
Insa animation-duration in keyframes este ignorata, in schimb animation-timing-function functioneaza.

Unde gasesc documentatie care prorprietati ale animation sunt suportate direct in keyframes si care nu ?
Multumesc.

Back to top

#2
tigerheart

Posted 25 May 2016 - 09:08

Savage Member

Grup: Senior Members
Posts: 9,893
Înscris: 07.08.2008

https://css-tricks.c...imation-syntax/
http://www.w3schools..._animations.asp

Back to top

#3
cornel001

Posted 25 May 2016 - 11:05

Scapat de la balamuc

Grup: Senior Members
Posts: 3,261
Înscris: 30.07.2005

Stiu foarte bine linkurile alea si nu-mi raspund la intrebare.
Este vorba de css-styles Required. One or more legal CSS style properties din al doilea link.

 .anim {
will-change: transform;
transform: translateZ(0);
animation: game 10s linear infinite;
}

@keyframes game {
0% {transform: translate(0px,0px); animation-duration: 3s; animation-timing-function: ease-in-out;}
50% {transform: translate(calc((100vw - 50px) / 2),calc(100vh - 50px)); animation-duration: 7s;}
100% {transform: translate(calc(100vw - 50px),0px);}
}

animation-timing-function face override pe liniar in prima miscare.
Dar animation-duration nu, ambele miscari dureaza la fel.

Unde gasesc documentatie care proprietati au efect in keyframes si care nu ?

Back to top

#4
maxtron_69

Posted 25 May 2016 - 13:12

Senior Member

Grup: Senior Members
Posts: 2,534
Înscris: 18.08.2010

Posteaza codul in jsfiffle, altfel cum vrei sa te ajute cineva?

Back to top

#5
cornel001

Posted 25 May 2016 - 15:54

Scapat de la balamuc

Grup: Senior Members
Posts: 3,261
Înscris: 30.07.2005

Am gasit pana la urma ceva documentatie, si nu merge asa.
Cred ca fac cu multiple keyframes si delay.

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

animatie css

#1 cornel001 Posted 25 May 2016 - 08:52

#2 tigerheart Posted 25 May 2016 - 09:08

#3 cornel001 Posted 25 May 2016 - 11:05

#4 maxtron_69 Posted 25 May 2016 - 13:12

#5 cornel001 Posted 25 May 2016 - 15:54

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
cornel001

Posted 25 May 2016 - 08:52

#2
tigerheart

Posted 25 May 2016 - 09:08

#3
cornel001

Posted 25 May 2016 - 11:05

#4
maxtron_69

Posted 25 May 2016 - 13:12

#5
cornel001

Posted 25 May 2016 - 15:54