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

les deux animations amelioration

Browse Source
This commit is contained in:
hugogogo
2021-04-02 20:50:39 +02:00
parent 5536e4b73e
commit c2e85de0d2
1 changed files with 11 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
styles/index.css
View File

@@ -93,31 +93,20 @@ body main {
/*------------------------------------------*/ /*------------------------------------------*/
/*THE ANIMATION*/ /*THE ANIMATION*/
@keyframes position { @keyframes position {
0% {transform: translate( 0%, 0%);} 0% {transform: translate( 0%, 0%);}
5% {transform: translate( 0.5%, -0.5%);} 20% {transform: translate( 1%, -1%);}
10% {transform: translate( 1%, 0%);} 30% {transform: translate(-1%, 0%);}
15% {transform: translate( 0.5%, -0.5%);} 40% {transform: translate( 1%, -1%);}
20% {transform: translate( 0%, -1%);} 50% {transform: translate( 0%, 1%);}
25% {transform: translate(-0.5%, -0.5%);} 60% {transform: translate( 1%, -1%);}
30% {transform: translate( -1%, 0%);} 70% {transform: translate( 0%, 0%);}
35% {transform: translate(-0.5%, -0.5%);} 80% {transform: translate(-1%, -1%);}
40% {transform: translate( 0%, -1%);} 90% {transform: translate( 1%, -1%);}
45% {transform: translate(-0.5%, -0.5%);} 100% {transform: translate( 0%, 0%);}
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 { .logo_bubbles .circle {
animation-name: position; animation-name: position;
animation-duration: 1s; animation-duration: 4s;
animation-delay: 0s; animation-delay: 0s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;