Martin_Rattensberger_IT_Services/thenextbigthing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Update animation to display alternating messages with fade effect

Browse Source
This commit is contained in:
Martin Rattensberger
2024-10-06 23:20:00 +02:00
parent fb9360023d
commit 0e2e4ab816
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
animation.html
View File

@@ -17,19 +17,20 @@
} }
.text { .text {
position: absolute; position: absolute;
animation: moveText 5s infinite alternate; animation: fadeText 6s infinite;
font-size: 2em; font-size: 2em;
opacity: 0.8; opacity: 0.8;
} }
@keyframes moveText { @keyframes fadeText {
0% { transform: translate(-50%, -50%); } 0%, 33% { opacity: 1; }
50% { transform: translate(10%, 10%); } 50%, 83% { opacity: 0; }
100% { transform: translate(50%, 50%); } 100% { opacity: 1; }
} }
</style> </style>
</head> </head>
<body> <body>
<div class="text">The Next BIG Thing...</div> <div class="text">The Next BIG Thing...</div>
<div class="text" style="animation-delay: 2.5s;">...coming soon</div> <div class="text" style="animation-delay: 2s;">stay tuned</div>
<div class="text" style="animation-delay: 4s;">coming soon</div>
</body> </body>
</html> </html>