Here is a pure CSS solution that has a bit of everything: CSS-Flash Advert.xar
Give all objects in the ad then ClassName of htmlclass="advertisement", using Utilities > Names.
In the index Page Head, insert this CSS:
Code:
<style>
.advertisement {
opacity: 0;
animation: present 5s ease-in-out;
}
@keyframes present {
0% { opacity: 0; }
15%, 75% { opacity: 1; transform: translateX(0%); }
100% { opacity: 0; transform: translateX(100%) scale(0.25) rotate(360deg); }
}
</style>
Remove all transform statements to just have a fade in and out effect.
The overall timing is the 5s (5 seconds).
The effects are timed to this through the percentage values.
At 15%, the ad will have faded in fully in 0.75s (15% x 5s), remains for 3s ((75-15)% x 5s), and goes nuts to the end of the 5s.
So in the last 1.25s, the shapes fade out, move right off the page, shrink to quarter size and have a full clockwise circle rotate.
Any page refresh or variant change restarts it all over.
Acorn
Bookmarks