/************************/
/* Scrolling animations */
/************************/
+
+ /* Bus */
@keyframes busroll {
from {
- transform: translate(0%, 0%);
+ transform: translateX(0%);
}
to {
- transform: translate(100%, 0%);
+ transform: translateX(100%);
}
}
animation: busroll 20s linear infinite;
}
+
+ /* Tram */
@keyframes tramroll {
from {
- transform: translate(0%, 0%);
+ transform: translateX(0%);
}
to {
- transform: translate(100%, 0%);
+ transform: translateX(100%);
}
}
#tram {
animation: tramroll 15s linear infinite;
}
+
+
+ /* Tram */
+ @keyframes trainroll {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(100%);
+ }
+ }
+
+ #train {
+ animation: trainroll 10s linear infinite;
+ }
+
+
+ /* Clouds */
+ @keyframes cloudsfloat {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #clouds {
+ animation: cloudsfloat 40s linear infinite;
+ }
+
+ @keyframes cloudscopyfloat {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #cloudscopy {
+ animation: cloudscopyfloat 40s linear infinite;
+ }
+
+
+ /* Trees */
+ @keyframes treespass {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #trees {
+ /* The trees move a little faster than the clouds */
+ animation: treespass 30s linear infinite;
+ }
+
+ @keyframes treescopypass {
+ from {
+ transform: translateX(0%);
+ }
+ to {
+ transform: translateX(-50%);
+ }
+ }
+
+ #treescopy {
+ /* The trees move a little faster than the clouds */
+ animation: treescopypass 30s linear infinite;
+ }
</style>
</head>