pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

deux animations

Browse Source
This commit is contained in:
hugogogo
2021-04-02 20:33:15 +02:00
parent 77fd4ffb6a
commit 5536e4b73e
1 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
styles/index.css
View File

@@ -92,38 +92,52 @@ body main {
/*------------------------------------------*/
/*THE ANIMATION*/
@keyframes rotation {
0% {transform: rotate(0deg); transform-origin: 49% 50%;}
50% {transform: rotate(360deg); transform-origin: 49% 50%;}
50.1% {transform: rotate(360deg); transform-origin: 51% 50%;}
100% {transform: rotate(0deg); transform-origin: 51% 50%;}
@keyframes position {
0% {transform: translate( 0%, 0%);}
5% {transform: translate( 0.5%, -0.5%);}
10% {transform: translate( 1%, 0%);}
15% {transform: translate( 0.5%, -0.5%);}
20% {transform: translate( 0%, -1%);}
25% {transform: translate(-0.5%, -0.5%);}
30% {transform: translate( -1%, 0%);}
35% {transform: translate(-0.5%, -0.5%);}
40% {transform: translate( 0%, -1%);}
45% {transform: translate(-0.5%, -0.5%);}
50% {transform: translate( -1%, 0%);}
55% {transform: translate(-0.5%, 0.5%);}
60% {transform: translate( 0%, 1%);}
65% {transform: translate( 0.5%, 0.5%);}
70% {transform: translate( 1%, 1%);}
75% {transform: translate( 0.5%, 0.5%);}
80% {transform: translate( 1%, 0%);}
85% {transform: translate( 0.5%, -0.5%);}
90% {transform: translate( 0%, -1%);}
95% {transform: translate(-0.5%, -0.5%);}
100% {transform: translate( -1%, 0%);}
}
.logo_bubbles .circle {
animation-name: rotation;
animation-name: position;
animation-duration: 1s;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-direction: alternate;
}
.logo_bubbles .circle._1 {
animation-duration: 2s;
animation-delay: 0s;
animation-delay: -0.8s;
animation-direction: reverse;
}
.logo_bubbles .circle._2 {
animation-duration: 2s;
animation-delay: 0.7s;
animation-direction: reverse;
animation-delay: -2.7s;
}
.logo_bubbles .circle._3 {
animation-duration: 1s;
animation-delay: 0.3s;
}
.logo_bubbles .circle._4 {
animation-duration: 1s;
animation-delay: 0.5s;
animation-delay: -1.3s;
animation-direction: reverse;
}
.logo_bubbles .circle._4 {
animation-delay: 0s;
}