animatie css
Last Updated: May 25 2016 15:54, Started by
cornel001
, May 25 2016 08:52
·
0
#1
Posted 25 May 2016 - 08:52
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
Posted 25 May 2016 - 09:08
#3
Posted 25 May 2016 - 11:05
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
Posted 25 May 2016 - 13:12
Posteaza codul in jsfiffle, altfel cum vrei sa te ajute cineva?
|
#5
Posted 25 May 2016 - 15:54
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