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 {
position: absolute;
animation: moveText 5s infinite alternate;
animation: fadeText 6s infinite;
font-size: 2em;
opacity: 0.8;
}
@keyframes moveText {
0% { transform: translate(-50%, -50%); }
50% { transform: translate(10%, 10%); }
100% { transform: translate(50%, 50%); }
@keyframes fadeText {
0%, 33% { opacity: 1; }
50%, 83% { opacity: 0; }
100% { opacity: 1; }
}
</style>
</head>
<body>
<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>
</html>