Skocz do zawartości
  • 0
faceman

Animacje na stronie

Pytanie

4 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 1
Spoiler

 

Dnia 20.05.2017 o 21:00, faceman napisał:


.element-animation{
animation: animationFrames linear 4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 4s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 4s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 4s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(200px,0px) rotate(180deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(200px,0px) rotate(180deg) ;
}
}
 

najszybciej zrobisz to w 1 pliku dając podany wcześniej kod w headerze: <style> kod </style>

do body dodajesz loader (w miejscu w którym animacja ma się wyświetlać)

  • Lubię to! 2

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
  • 0

mam css
 

Spoiler

 

.element-animation{
animation: animationFrames linear 4s;
animation-iteration-count: 1;
transform-origin: 50% 50%;
-webkit-animation: animationFrames linear 4s;
-webkit-animation-iteration-count: 1;
-webkit-transform-origin: 50% 50%;
-moz-animation: animationFrames linear 4s;
-moz-animation-iteration-count: 1;
-moz-transform-origin: 50% 50%;
-o-animation: animationFrames linear 4s;
-o-animation-iteration-count: 1;
-o-transform-origin: 50% 50%;
-ms-animation: animationFrames linear 4s;
-ms-animation-iteration-count: 1;
-ms-transform-origin: 50% 50%;
}

@keyframes animationFrames{
0% {
transform: translate(0px,0px) rotate(0deg) ;
}
100% {
transform: translate(200px,0px) rotate(180deg) ;
}
}

@-moz-keyframes animationFrames{
0% {
-moz-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-moz-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-webkit-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-o-keyframes animationFrames {
0% {
-o-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-o-transform: translate(200px,0px) rotate(180deg) ;
}
}

@-ms-keyframes animationFrames {
0% {
-ms-transform: translate(0px,0px) rotate(0deg) ;
}
100% {
-ms-transform: translate(200px,0px) rotate(180deg) ;
}
}


to jest przykładowa

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

  • Przeglądający   (0 użytkowników)

    Brak zarejestrowanych użytkowników przeglądających tę stronę.

×