Kezdőoldal » Számítástechnika » Weblapkészítés » 3-4 CSS ANIMÁCIÓ EGY ELEMRE?

3-4 CSS ANIMÁCIÓ EGY ELEMRE?

Figyelt kérdés

Egy képre szeretnék alkalmazni multiple css animációkat,de

csak egy érvényesül!??Tudnátok tippeket?

2016. okt. 17. 15:01

1/5 A kérdező kommentje:

<style>

.image {

-webkit-animation:shake 1s linear infinite;

-webkit-animation:swing 1s linear infinite;

-webkit-animation:tada 1s linear infinite;

-webkit-animation:wobble 1s linear infinite;

}

@-webkit-keyframes shake {

0%,100% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0); }

10%,30%,50%,70%,90% {

-webkit-transform: translate3d(-10px, 0, 0);

transform: translate3d(-10px, 0, 0); }

20%,40%,60%,80% {

-webkit-transform: translate3d(10px, 0, 0);

transform: translate3d(10px, 0, 0); } }

@keyframes shake {

0%,100% {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0); }

10%,30%,50%,70%,90% {

-webkit-transform: translate3d(-10px, 0, 0);

transform: translate3d(-10px, 0, 0); }

20%,40%,60%,80% {

-webkit-transform: translate3d(10px, 0, 0);

transform: translate3d(10px, 0, 0); } }

.shake {

-webkit-animation-name: shake;

animation-name: shake; }

@-webkit-keyframes swing {

20% {

-webkit-transform: rotate3d(0, 0, 1, 15deg);

transform: rotate3d(0, 0, 1, 15deg); }

40% {

-webkit-transform: rotate3d(0, 0, 1, -10deg);

transform: rotate3d(0, 0, 1, -10deg); }

60% {

-webkit-transform: rotate3d(0, 0, 1, 5deg);

transform: rotate3d(0, 0, 1, 5deg); }

80% {

-webkit-transform: rotate3d(0, 0, 1, -5deg);

transform: rotate3d(0, 0, 1, -5deg); }

100% {

-webkit-transform: rotate3d(0, 0, 1, 0deg);

transform: rotate3d(0, 0, 1, 0deg); } }

@keyframes swing {

20% {

-webkit-transform: rotate3d(0, 0, 1, 15deg);

transform: rotate3d(0, 0, 1, 15deg); }

40% {

-webkit-transform: rotate3d(0, 0, 1, -10deg);

transform: rotate3d(0, 0, 1, -10deg); }

60% {

-webkit-transform: rotate3d(0, 0, 1, 5deg);

transform: rotate3d(0, 0, 1, 5deg); }

80% {

-webkit-transform: rotate3d(0, 0, 1, -5deg);

transform: rotate3d(0, 0, 1, -5deg); }

100% {

-webkit-transform: rotate3d(0, 0, 1, 0deg);

transform: rotate3d(0, 0, 1, 0deg); } }

.swing {

-webkit-transform-origin: top center;

transform-origin: top center;

-webkit-animation-name: swing;

animation-name: swing; }

@-webkit-keyframes tada {

0% {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1); }

10%,20% {

-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);

transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }

30%,50%,70%,90% {

-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }

40%,60%,80% {

-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }

100% {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1); } }

@keyframes tada {

0% {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1); }

10%,20% {

-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);

transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }

30%,50%,70%,90% {

-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);

transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }

40%,60%,80% {

-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);

transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }

100% {

-webkit-transform: scale3d(1, 1, 1);

transform: scale3d(1, 1, 1); } }

.tada {

-webkit-animation-name: tada;

animation-name: tada; }

@-webkit-keyframes wobble {

0% {

-webkit-transform: none;

transform: none; }

15% {

-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }

30% {

-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }

45% {

-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }

60% {

-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }

75% {

-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }

100% {

-webkit-transform: none;

transform: none; } }

@keyframes wobble {

0% {

-webkit-transform: none;

transform: none; }

15% {

-webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);

transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }

30% {

-webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);

transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }

45% {

-webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);

transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }

60% {

-webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);

transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }

75% {

-webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);

transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }

100% {

-webkit-transform: none;

transform: none; } }

.wobble {

-webkit-animation-name: wobble;

animation-name: wobble; }}}

</style>

2016. okt. 17. 15:17

2/5 anonim

válasza:

rakd őket egybe... mármint a folyamatokat.

2016. okt. 17. 15:34

Hasznos számodra ez a válasz?

3/5 anonim

válasza:

Vagy mondjuk inkább ne csicsázd agyon az oldalad, mert okádék giccs lesz belőle.

2016. okt. 17. 15:47

Hasznos számodra ez a válasz?

4/5 A kérdező kommentje:

Hogy rakjam egybe?

2016. okt. 17. 15:59

5/5 anonim

válasza:

különböző irányba forgatnád szegény elemet, egy szere nem tud ellentétes irányba is mozogni.

Tehát ha azt akarod hogy forduljon jobbra, akkor ne kérd tőle hogy közben forduljon balra is.

De fordulhat pl. lefele és közbe jobra vagy balra.

2016. okt. 17. 20:47

Hasznos számodra ez a válasz?

Kapcsolódó kérdések:

Több css3 animáció egy elemre?

Valaki, aki ért a html/css-en belüli animáció készítéshez (transform, transition) tudna segíteni? Lenne 1-2 konkrét kérdésem.

Hogyan tudok a képekre hover animation css3 effektet készíteni?

Hogyan lehet megoldani azt jQuery-ben, hogy egy animáció csak akkor induljon el, hogyha az előtte lévő animáció már véget ért?

Hogyan lehetséges html-ben az oldalon belüli ugrás animálása?

Hogyan kell egy teljesen alap (animáció nélküli, nemenyíló) vízszintes navigációt létrehozni html + javascript felhasználásával?

Számítástechnika főkategória kérdései »

Számítástechnika - Weblapkészítés kategória kérdései »

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!