Jump to content

SUBIECTE NOI
« 1 / 5 »
RSS
O smecherie pe care nu o inteleg

Balcon parter fara acte

unde gasesc un speed bag in bucur...

Programe TV cu altfel de sporturi
 Laptop "bun la toate" max...

ctfmon.exe - System Error (in Saf...

Ați prins vremurile cand 120 Volț...

Whatsapp nu afișeaza numele ...
 Medii admitere Politehnica Bucure...

Se extinde Baza de la Kogalniceanu

Politist mutilat de caine in curt...

Trotineta- cat rezista?
 Windows 11 si inregistrare de pe ...

Cont Facebook spart

Accesare Plex prin webstation

Reziliere contract Digi Mobil?
 

animatie css

- - - - -
  • Please log in to reply
4 replies to this topic

#1
cornel001

cornel001

    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.

#2
tigerheart

tigerheart

    Savage Member

  • Grup: Senior Members
  • Posts: 9,806
  • Înscris: 07.08.2008
https://css-tricks.c...imation-syntax/
http://www.w3schools..._animations.asp

#3
cornel001

cornel001

    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 ?

#4
maxtron_69

maxtron_69

    Senior Member

  • Grup: Senior Members
  • Posts: 2,534
  • Înscris: 18.08.2010
Posteaza codul in jsfiffle, altfel cum vrei sa te ajute cineva?

#5
cornel001

cornel001

    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.

Anunturi

Bun venit pe Forumul Softpedia!

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Forumul Softpedia foloseste "cookies" pentru a imbunatati experienta utilizatorilor Accept
Pentru detalii si optiuni legate de cookies si datele personale, consultati Politica de utilizare cookies si Politica de confidentialitate