Animacje na stronie

[faceman 1]

Witam

Jak umieszczać animacje css na swojej stronie zrobionej w html? Wszystkie poradniki są troche nie jasne

[Kuba6850 417]

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ć)

[Jahek 18]

Masz jakieś animacje? Kod CSS, JS.

[faceman 1]

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

[kebab 30]

Ten temat został zamknięty.